Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsAtoms
Icon

Icons are simplified graphics used to represent concepts and help users navigate the UI.

Icons are simplified graphics used to represent concepts and help users navigate the UI.
This project has a set of icons that uses SVGs from Phosphor icons.

Overview


_10
<Icon name="ShoppingCart" weight="thin" width={32} height={32} />
_10
<Icon name="ShoppingCart" weight="light" />
_10
<Icon name="ShoppingCart" weight="regular" width={16} height={16} />
_10
<Icon name="ShoppingCart" weight="bold" width={20} height={20} />

The default values for width and height are 24.

Import

Import the component from @faststore/ui

_10
import { Icon } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

_10
@import '@faststore/ui/src/components/atoms/Icon/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage


_10
<Icon name="ShoppingCart" />


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-icon
name*stringSymbol id from element to render. Take a look at `/static/icons.svg`. Example: <Icon name="Bell" />
weight"thin" | "light" | "regular" | "bold"SVG weight.regular
widthnumberSVG width.'24'
heightnumberSVG height.'24'
List of available icons

Customization

For further customization, you can use the following data attributes:
data-fs-icon
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page