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.



All Icon components supports various sizes that can be set with the size prop: 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl'.


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 either via content prop or as a default slot.

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


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