Icon

Icons are simplified graphics that represent actions, statuses, and navigation elements, helping users navigate the UI.

Source code

The Icon component provides SVG-based icons from the FastStore Iconography library, built on top of Phosphor Icons.

Icons are used across the interface to improve clarity and usability in different contexts, such as:

Navigation: Provide cues that help users move through menus, pages, and the homepage.
User actions: Represent tasks like adding items to the cart, sharing content, or saving to favorites.
System feedback: Indicate statuses such as information, success, warning, or error.
Commerce elements: Represent the cart, account, or checkout.
Form inputs: Improve field usability with search, clearing fields, toggling password visibility, or copying content.
Menus and lists: Indicate dropdowns, pagination, or breadcrumb trails.

Browse the full set of icons in Iconography.

Example

Code

The default values for width and height are 24.

Usage

Import the component


_10import { Icon } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

Examples

Weight

Use the weight prop to control the visual stroke weight of the icon. Available options are thin, light, regular (default), and bold.

Bold

Example

Code

Light

Example

Code

Regular (default)

Example

Code

Thin

Example

Code

Size

Control icon size with the width and height props. If omitted, both default to 24 (medium size).

Small

Example

Code

Medium (default)

Example

Code

Large

Example

Code

Design tokens

The Icon component does not expose specific design tokens. Customize its appearance using:

The weight prop (thin, light, regular, bold).
CSS selectors targeting the [data-fs-icon] data attribute for layout adjustments. The default theme applies only structural styles to this selector.

Data attributes

You can target and override Icon styles using the following data attributes:

data-fs-icon

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-icon`
name*	`string`	Symbol id from element to render. Take a look at `/static/icons.svg`. Example: <Icon name="Bell" />
weight	`"thin" \| "light" \| "regular" \| "bold"`	SVG weight.	`regular`
width	`number`	SVG width.	`'24'`
height	`number`	SVG height.	`'24'`

Best practices

✅ Do's

Ensure icons are visually consistent in weight and size within the same context.
Provide sufficient contrast against varied backgrounds.
Pair icons with text when meaning may be ambiguous.

❌ Don'ts

Don't rely solely on color or the icon graphic to convey critical meaning.
Don't mix different icon weights within the same control or pattern.