@freecodexyz/design-system-icons

SVG sources, and the React components generated from them.

pnpm add @freecodexyz/design-system-icons

import { ArrowRightIcon, BrandGithubIcon } from '@freecodexyz/design-system-icons'

<ArrowRightIcon />                         // decorative — aria-hidden
<ArrowRightIcon title="Continue" />        // meaningful — role="img" with a name
<ArrowRightIcon size={20} />               // default is 1em

The default is decorative

Icons are aria-hidden="true" and focusable="false" unless given a title.

That asymmetry is deliberate. Most icons in a UI repeat a label that is already there, and the noisy failure — a screen reader announcing "image, image, image" through a toolbar — is the one that happens by omission. The meaningful case has to be opted into.

Inside an icon-only button, the button carries the name; the icon stays decorative:

<Button icon aria-label="Delete repository">
  <TrashIcon />
</Button>

Sizing and colour

size defaults to 1em, so an icon matches the type beside it with nothing passed. Colour is currentColor throughout — set color, not fill.

The set

32 icons. UI icons are stroked on a 24 grid at 1.75 weight; brand marks are filled and are the official artwork.

iconNames exports every slug, for a gallery or a picker.

Adding one

1. Drop a .svg into svg/. Match the existing presentation attributes — a stroked UI icon or a filled brand mark, nothing in between.
2. pnpm --filter @freecodexyz/design-system-icons generate
3. Commit both the SVG and the generated component.

The SVG is the source of truth. Never hand-edit anything in src/icons/ — it is regenerated, and your change will be lost.