Props - Svelte Heros v2 v3

Props #

All icons are extended SVGAttributes from svelte/elements.

Types #

Size #

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

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

CSS HEX Colors #

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

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 #

Bootstrap #

Dark mode #

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

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.

Standalone Icons #

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

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:

Academic CapThe shape of a red academic cap

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:

Passing down other attributes #

Since all icons have ...restProps, you can pass other SVGAttributes.

Since all icons have ...restProps, you can pass other attibutes as well.

Dynamically changing variation #

Use the following example to change the variation of icon dynamically.

By clicking the icon, it changes to solid or outline.