Foundations

Iconography

Interface icons come from a single Icon component, as stroke icons drawn on a 24 px grid. The default set is Lucide and the second set is Tabler; icon colour comes from the text and size from the token scale.

Icon sets

Set	Licence	Role
Lucide	ISC (MIT for icons derived from Feather)	Default set. Search here first.
Tabler Icons	MIT	Second set. Only for concepts Lucide has no icon for.
BigBang icons	Pupas	Concepts no set covers; drawn on the same grid with the same stroke weight.

Both sets use a 24 px grid, a 2-unit stroke and round caps and joins, so they look consistent side by side.
Filled icon sets (Phosphor, Material, Fluent) are never used on the same screen as stroke icons.
Remix Icon is not used: from 4.9.0 on, its licence forbids redistributing the icon pack (D-17).
Payment method and card network marks are not icons. They are used from their owners’ files, with colours unchanged, from a separate folder. See Brand.

Icon component

In the interface, icons are used only through <Icon name="…" />. There are no direct imports from an icon package (ASSET-03).
The name value is a type derived from the icon register; a name not in the register does not compile.
Names are BigBang names, not the set’s own names: chevron-down, check, x. If an icon moves from one set to another, its name stays.
Only icons in use enter the package, each as its own module; unused icons never reach the final bundle.
The licence notices of the sets in use ship with the product.

Sizes

Size	px	Text it pairs with	Example
`xs`	12	`body-sm`, `label-sm`	Icon inside a Badge
`sm`	16	`body-md`, `label-md`	Button `sm` and `md`, icon inside a field
`md`	20	`body-lg`, `heading-sm`	Button `lg`, menu item
`lg`	24	`heading-md` and up	Empty-state row, next to a heading
`xl`	32	`heading-lg` and up	Large icon standing on its own, without text

The gap between icon and text is space-sm (6 px) or space-md (8 px).
An icon is centred vertically on the first line of text.
Component icon sizes come from their own tokens: button-icon-size-*, badge-icon-size.

Stroke and grid

Icons are drawn on a 24 × 24 px grid with 2 px of padding on each side.
The stroke is 2 units at 24 px and thins in proportion as the icon gets smaller.
Caps and joins are round. Corner radius is 2 units in Lucide and 3 in Tabler; new icons follow Lucide.
The stroke weight is 2 in every brand.

Colour

Icon colour comes from the text through currentColor. When a different colour is needed, one of the icon tokens is chosen; an icon never has its own colour.

Token	Light mode	Dark mode
`--bigbang-color-icon-default`	`#262626#262626#262626`	`#f5f5f5#f5f5f5#f5f5f5`
`--bigbang-color-icon-subtle`	`#737373#737373#737373`	`#a1a1a1#a1a1a1#a1a1a1`
`--bigbang-color-icon-disabled`	`#a1a1a1#a1a1a1#a1a1a1`	`#525252#525252#525252`
`--bigbang-color-icon-inverse`	`#ffffff#ffffff#ffffff`	`#171717#171717#171717`
`--bigbang-color-icon-brand`	`#146d83#9a451c#4f55b4`	`#77bacf#ea9774#9aa6ff`
`--bigbang-color-icon-danger`	`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-icon-success`	`#138a50#138a50#138a50`	`#7dd09b#7dd09b#7dd09b`
`--bigbang-color-icon-warning`	`#a16600#a16600#a16600`	`#ecac5f#ecac5f#ecac5f`
`--bigbang-color-icon-info`	`#007ac1#007ac1#007ac1`	`#79c2ff#79c2ff#79c2ff`

Accessibility

An icon is decorative by default: it carries aria-hidden="true" and the screen reader skips it. Text with the same meaning sits next to it (ASSET-08).
A control that carries only an icon must have a label; the label also shows in the tooltip.
An icon that carries meaning on its own (such as a status icon in a table cell) has a name and at least 3:1 contrast against its background (WCAG 1.4.11).
If an icon is not enough to explain an action on its own, use a button with text.
The same icon means the same thing everywhere; an icon never gets a second meaning.

Motion

Icons do not move for decoration.
A state change may be shown with motion: the arrow of an expanding section turns 180° with motion-collapsible-icon-duration.
The only icon that spins continuously is the loading indicator; with reduced motion it stops.

Adding a new icon

Search the icon register and Lucide; if there is nothing, search Tabler.
When found, the icon is added to the register under a BigBang name, with source set, version and licence.
If no set has it, it is drawn on the 24 px grid with a 2-unit stroke and added to the register with source own.
The SVG file is cleaned: metadata, <style>, style=, <script>, <foreignObject> and external links are removed; colours become currentColor (ASSET-06).
The name is kebab-case, with no brand names and no prefixes such as new-, final- or v2 (ASSET-13).

Gallery

Every registered icon is on the Icon gallery page. The gallery reads the icons from the packages/icons registry at build time, searches by name and keyword, previews each icon at 12–32 px and at different stroke widths, and copies its name and its <Icon /> line. Search the gallery before adding a new icon.

Guidelines

Use one icon family

DoSame stroke weight and cap style; the icons read as one family.

Don'tMixing filled and stroke icons breaks the visual weight.

Colour icons with the text colour, not their own

<Icon name=“check” />

DoThe icon takes the text colour; it stays in step when mode or brand changes.

<svg stroke=“#3366CC”>

Don'tA fixed colour clashes in dark mode and in another brand.