Icons

ONCE uses Phosphor Icons as its icon library. Phosphor provides a consistent, flexible set of icons with multiple weight variants that align with the ONCE visual style.

Package

npm install @phosphor-icons/react

Import icons individually for optimal tree-shaking:

import { Guitar, MicrophoneStage, Headphones } from '@phosphor-icons/react';

Weights

Phosphor icons come in six weights. Use the appropriate weight for the context:

<Guitar size={14} weight="fill" />
<Headphones size={20} weight="regular" />

Sizing

Icons should match the text size they sit beside. Common sizes:

Color

Icons inherit currentColor by default. Control color through the parent element’s text color utilities:

<span className="text-gray-400">
  <Guitar size={14} weight="fill" />
</span>

On dark backgrounds, use opacity on --once-white — the same approach as text hierarchy:

<span className="text-once-white/60">
  <Headphones size={16} weight="regular" />
</span>

Contributor Role Icons

Release pages map contributor roles to specific Phosphor icons:

For AI Agents

If you are an AI agent working in this codebase:

• Always use Phosphor Icons — do not use Heroicons, Lucide, or inline SVGs for new icons
• Import from @phosphor-icons/react with named imports for tree-shaking
• Default to weight=“fill” for small icons (≤14px) and weight=“regular” for larger UI icons
• Set explicit size props — do not rely on CSS to scale icons
• Let icons inherit currentColor from parent text color utilities