Icons

The icon set is exported from Figma into icons/svg, and each file becomes a React component. Search by name and click an icon to copy its component name.

92 of 92 icons. Click an icon to copy its component name.

Naming

In Figma	File	Component
`icon/edit-2`	`icons/svg/edit-2.svg`	`Edit2Icon`
`icon/star-bold`	`icons/svg/star-bold.svg`	`StarBoldIcon`

Outline icons are stroked. Icons whose name ends in -bold are filled.

Using an icon

import { Edit2Icon } from '@beyul/sulmu-ui'

<Edit2Icon size="sm" />
<Edit2Icon label="Edit" />

Sizes, colour and accessibility are covered on the Icon component page.

Adding an icon

Export the icon from Figma as SVG with the colour set to currentColor, and save it in icons/svg with a kebab-case name.
Run pnpm icons (or pnpm gen). This regenerates src/components/icon/icons.gen.tsx.
Add the icon to the Icons page of the Figma library with the same name.

The new icon appears on this page the next time the site is built.