previously Vue Storefront Build Better Storefronts

Icons

Storefront UI ships with a default set of icons available with the naming convention SfIcon{Name}. Each icon is a component that extends the SfIconBase component.

List of icons

List of all icons shipped with Storefront UI below. Click on any of the icons to copy its name.

Examples

Sizes

All Icon components supports various sizes that can be set with the size prop: 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl' . Size can be overwritten by applying new styling on icon.

Colors

All Icon components inherit the current text color using Tailwind's fill-current class. You can customize the color of an icon with any of Tailwind's text color classes.

Custom icon

The SfIconBase component supports displaying of a custom SVG icon.

You can pass SVG content as children.

If you're using a custom icon, you need to specify either the viewBox or width/height attributes for the SVG to render correctly.

Notes

Storefront UI icons are generated with use of createIcons.js script and they are based on IconBase component.

Accessibility notes

When using an Icon without any additional label and/or description, you should specify an aria-label on the icon component.

Playground