alouette-icons

name	alouette-icons
description	Use Phosphor icons with alouette. Import each icon from alouette-icons/phosphor-icons/IconName, then render via the Icon component or pass it to Button / IconButton / Message icon props. Tint with a text-* className (resolved to a color token); size with the numeric size prop. Load when adding icons to alouette UI.
type	composition
library	alouette
library_version	20.8.0
requires	["alouette-theming"]
sources	["christophehurpeau/alouette:packages/alouette/src/ui/primitives/Icon.tsx","christophehurpeau/alouette:packages/alouette/src/ui/actions/Button.stories.tsx","christophehurpeau/alouette:CLAUDE.md"]

This skill builds on alouette-theming. Read it first for color tokens.

alouette + alouette-icons

Icons come from the alouette-icons package (auto-generated Phosphor icons). Import each icon individually, then render it through alouette's Icon component or pass the element to a component's icon prop. Icon resolves a text-* className to a concrete color token and applies it as the SVG color.

Setup

import { Icon } from "alouette";
import { HeartRegularIcon } from "alouette-icons/phosphor-icons/HeartRegularIcon";

<Icon icon={<HeartRegularIcon />} size={24} className="text-accent" />;

Core Patterns

Icons inside alouette components

Button, IconButton and Message take an icon element directly — they size and tint it for you.

import { Button, IconButton } from "alouette";
import { ArrowLeftRegularIcon } from "alouette-icons/phosphor-icons/ArrowLeftRegularIcon";
import { XRegularIcon } from "alouette-icons/phosphor-icons/XRegularIcon";

<Button text="Back" icon={<ArrowLeftRegularIcon />} />
<IconButton icon={<XRegularIcon />} aria-label="Close" onPress={close} />

Tinting

Tint follows the current accent when you use text-accent:

<Icon icon={<HeartRegularIcon />} className="text-muted" />
<Box accent="danger">
  <Icon icon={<HeartRegularIcon />} className="text-accent" />
</Box>

Common Mistakes

MEDIUM Barrel-importing the icon set

Wrong:

import { ArrowLeftRegularIcon } from "alouette-icons";

Correct:

import { ArrowLeftRegularIcon } from "alouette-icons/phosphor-icons/ArrowLeftRegularIcon";

Icons are individually importable modules; a barrel import pulls in the entire generated set and bloats the bundle.

Source: packages/alouette/src/ui/actions/Button.stories.tsx; CLAUDE.md (Icons)

MEDIUM Tinting an icon with a color prop

Wrong:

<Icon icon={<InfoRegularIcon />} color="#888" />

Correct:

<Icon icon={<InfoRegularIcon />} className="text-muted" />

Icon resolves a text-* className to a --color-* token and passes it as the SVG color; a raw color bypasses theming and breaks mode/accent adaptation.

Source: packages/alouette/src/ui/primitives/Icon.tsx

MEDIUM Sizing an icon with width/height classes

Wrong:

<Icon icon={<InfoRegularIcon />} className="w-6 h-6" />

Correct:

<Icon icon={<InfoRegularIcon />} size={24} />

Icon takes a numeric size prop (px) applied as the SVG width/height; w-* / h-* classes are not how alouette sizes icons.

Source: packages/alouette/src/ui/primitives/Icon.tsx