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.