Icon — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Radix UI.

Installation

Complete project setup first. Your configuration must select react/radix and include your Design System ID.

pnpm exec frontfriend download icon -f react --primitive radix

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<Icon name="CircleDashed" size="4" />

Examples

Default

<Icon name="CircleDashed" size="4" />

Custom

<Icon name="IconDay" size="4" />

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Radix UI.

Prop	Type	Default
`color`	`string`	`—`
`name`	`string`	`—`
`onClick`	`React.MouseEventHandler`	`—`
`size`	`string`	`"4"`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.