Icon API

API reference for the Icon component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: Icon

Import

import { Icon } from '@soroush.tech/design-system/Icon'

Props

Prop	Type	Default	Description
`name`	`IconName`	-	Registry key of the icon to render (required).
`color`	`keyof Theme['text']`	`'primary'`	Icon colour - resolves from `theme.text`, applied via `currentColor`.
`size`	`string \| number`	`'1.5rem'`	Sets both width and height (icons are square).

Also accepts LayoutProps, SpaceProps, and any passthrough SVG attribute (className, data-*, aria-*). Renders aria-hidden by default - pass aria-hidden={false} and an aria-label for meaningful icons.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.