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'.
Colors
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.
Notes
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.