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.



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 (opens new window) class. You can customize the color of an icon with any of Tailwind's text color (opens new window) 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 (opens new window) 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.