Props - Svelte Awesome Icons v3

Props #

All icons are extended SVGAttributes from svelte/elements.

- size = ctx.size || '24',
- role = ctx.role || 'img',
- color = ctx.color || 'currentColor',
- title,
- desc,
- focusable = 'false',
- ariaLabel,
- ...restProps

Types #

import type { SVGAttributes } from 'svelte/elements';
type TitleType = {
id?: string;
title?: string;
};

type DescType = {
id?: string;
desc?: string;
};

export interface BaseProps extends SVGAttributes<SVGElement> {
size?: string;
role?: string;
color?: string;
}

export interface Props extends BaseProps {
title?: TitleType;
desc?: DescType;
ariaLabel?: string;
focusable?: 'true' | 'false' | 'auto';
}

Size #

To change the size of an icon, use the size prop and specify the desired size. For example:

<CalendarCheckRegular size="40" />

You can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:

<CalendarCheckRegular class="h-24 w-24 text-blue-700 mr-4" />

CSS HEX Colors #

Use the color attribute to change colors with HEX color code:

<CalendarCheckRegular color="#ff0000" />

CSS framework #

You can apply CSS framework color and other attributes directly to the icon component or its parent tag using the class prop.

Tailwind CSS #

<CalendarCheckRegular size="30" class="text-red-700 dark:text-green-300 inline m-1" />

<div class="text-red-700 dark:text-green-300 inline m-1">
  <CalendarCheckRegular size="30" />
</div>

Bootstrap #

<CalendarCheckRegular class="position-absolute top-0 px-1" />

Dark mode #

If you are using the dark mode on your website with Tailwind CSS, add your dark mode class to the class prop.

<CalendarCheckRegular class="text-blue-700 dark:text-red-500" />

A11y #

Decorative Icons #

By default, icons have no aria-label. This is intentional - when icons are used next to text or as decorative elements, they don't need labels as screen readers will ignore them.

<button>
  <BellRegular /> Notifications
</button>
<!-- Screen reader reads: "Notifications button" -->

Standalone Icons #

When icons are used without accompanying text (e.g., icon-only buttons), you should provide an accessible label using the ariaLabel prop:

<button>
  <BellRegular ariaLabel="View notifications" />
</button>
<!-- Screen reader reads: "View notifications button" -->

Rich Descriptions #

For complex icons that need detailed descriptions, use title and desc props. The title provides a short label, while desc offers a longer description:

<BellRegular
title={{ id: 'bell-title', title: 'Notification bell' }}
desc={{ id: 'bell-desc', desc: 'Bell icon indicating new notifications' }}
/>

Note: When using title, you don't need ariaLabel as the title will be used automatically via aria-labelledby.

Focusable #

Icons are not keyboard-focusable by default (focusable="false"). If you need to change this behavior, use the focusable prop:

<BellRegular focusable="true" />

Passing down other attributes #

As default all icons are extend SVGAttributes SVGElement. You can add all the events and other props described in the type.

<BellRegular
id="my-svg"
transform="rotate(45)"
class="hover:cursor-pointer dark:text-white"
onclick={() => alert('hello')}
/>