Symbols

157 spot illustrations as Lit web components, for empty states, status panels, onboarding, commerce, security and error pages: <c2-symbol-empty-inbox>, <c2-symbol-no-results>, <c2-symbol-success>, and more.

The artwork is drawn for this package (MIT, like the rest of the repository) on one 160×160 grid, and every colour in it comes from a small set of themeable roles, so a theme recolours the whole set at once and dark mode works through @c2n/theme.

Installation

npm install @c2n/symbols

Usage

Import only the symbols you use:

import '@c2n/symbols/symbols/empty-inbox.js'

<c2-symbol-empty-inbox></c2-symbol-empty-inbox>

Or register the whole set:

import '@c2n/symbols'

A symbol is decorative by default (aria-hidden). Give it a label when it carries meaning that no nearby text repeats:

<c2-symbol-offline label="You are offline"></c2-symbol-offline>

The symbol names, catalog (title, category, description), tag helper and SymbolElement base class are exported from the package root.

In a status panel

<c2-status-panel media="illustration" heading="No results" description="Try a different keyword or clear the filters.">
  <c2-symbol-no-results slot="media"></c2-symbol-no-results>
</c2-status-panel>

Theming

| Property | Default | Role | | ---------------------------------- | --------- | ------------------------------------------------ | | --c2-symbol--size | 120px | Width and height | | --c2-symbol--stroke-width | 3 | Outline width on the 160×160 canvas | | --c2-symbol__backdrop--color | #f4f4f5 | Soft disc behind the artwork | | --c2-symbol__surface--color | #ffffff | Faces of objects, marks drawn on coloured shapes | | --c2-symbol__muted--color | #e4e4e7 | Secondary fills, ground shadows | | --c2-symbol__line--color | #a1a1aa | Default outline | | --c2-symbol__ink--color | #71717a | Small solid details | | --c2-symbol__primary--color | #0265dc | Accent | | --c2-symbol__primary-soft--color | #edf1fe | Soft accent fills | | --c2-symbol__accent--color | #fbbf24 | Golden highlight: stars, coins, bulbs, confetti | | --c2-symbol__success--color | #16a34a | Success badges | | --c2-symbol__warning--color | #f59e0b | Warning badges and hazard signs | | --c2-symbol__error--color | #dc2626 | Error badges and strike-throughs |

Set --c2-symbol__backdrop--color: transparent to drop the disc.

Adding or editing a symbol

The components under src/symbols/ are generated and committed. The sources are svg/<name>.svg plus an entry in svg/catalog.json (title, category — empty, status, error, security, commerce, communication, files or onboarding — and description). A source must use the exact wrapper <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"> and take every colour from a class: a fill role (backdrop, surface, muted, ink, primary, primary-soft, accent, success, warning, error), the default outline line, or a coloured stroke line-<role>. The generator rejects fill, stroke, style and any other class. Then run:

npm run generate -w packages/icons/symbols
npm run build -w packages/icons/symbols