icons

Icon registry used across the Supabase apps.

Purpose

A single source of truth for Supabase-flavoured icons. Built via a sibling package (packages/build-icons) that ingests source SVGs and emits typed React components.

Directory layout

packages/icons/
├── src/         # Generated icon components
├── ...
└── package.json

How to import

import { IconCheck, IconClose } from 'icons';

How icons are generated

packages/build-icons runs the icon build:

• Reads source SVGs.
• Optimizes them with SVGO.
• Emits typed React components into packages/icons/src/.

Run via pnpm --filter build-icons build (or whatever the package's build script is).

Conventions

• Icon components are PascalCase, prefixed Icon.
• They expose size, className, and strokeWidth props.
• Apps usually combine them with Lucide icons (lucide-react) — Studio favours Lucide for general-purpose icons and 'icons' for Supabase-branded ones.

Integration points

• Consumed by every app under apps/.
• Also re-exported through apps/design-system for documentation purposes.

Entry points for modification

• Add an icon → drop the source SVG in the packages/build-icons input directory and rebuild.
• Adjust generation defaults → tweak packages/build-icons scripts.