Icons

LaunchFast uses SVG sprites for optimal icon performance. Raw SVGs are compiled into a single sprite sheet, and the Icon component renders them by reference — no inline SVG bloat.

How it works

Raw SVG files live in other/svg-icons/. Running the build script compiles them into a single icon.svg sprite and an icons.json manifest that gives TypeScript autocomplete for icon names.

npm run build:icons

The build script automatically strips width and height attributes from SVGs so they scale properly with CSS.

Adding icons with Sly

LaunchFast ships with icons from Radix UI. You can add more using the Sly CLI, which downloads SVGs and rebuilds the sprite automatically:

npx sly add @radix-ui/icons trash pencil-1 avatar

If you omit the icon names, Sly shows an interactive picker with all available icons. The configuration lives in other/sly/sly.json.

Custom icons

To add your own SVGs, drop them into other/svg-icons/ and run npm run build:icons. Use kebab-case filenames to avoid case-sensitivity issues across operating systems.

Using the Icon component

The Icon component renders a sprite reference. The name prop matches the filename without the .svg extension:

import { Icon } from '#app/ui/components/custom/icon.tsx'

<Icon name="trash" />
<Icon name="pencil-1" size="lg" />

Icons default to 1em height and width, so they match the surrounding text size. Use the size prop to customize.

Related