Symbols

@c2n/symbols is a set of spot illustrations, one web component each: c2-symbol-<name>. Use them wherever a view needs a picture rather than an icon: the media of a c2-status-panel, an empty table or list, a 404 page, an onboarding step, a payment confirmation, a permission prompt. The set covers empty states, status and celebration, errors and limits, security and privacy, commerce, communication, files and data, and onboarding.

The artwork is drawn for this library on one 160×160 grid. Every colour in it comes from a small set of colour roles (backdrop, surface, outline, accent, a golden highlight, success, warning, error), so the whole set follows @c2n/theme — brand colour and dark mode included — and one CSS variable recolours a role everywhere.

Installation

npm install @c2n/symbols

Import

Import individual symbols to keep bundles small:

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

or register the whole set at once:

import '@c2n/symbols'

Examples

<c2-symbol-empty-inbox></c2-symbol-empty-inbox>
<c2-symbol-no-results></c2-symbol-no-results>
<c2-symbol-payment-success></c2-symbol-payment-success>
<c2-symbol-celebration></c2-symbol-celebration>
<c2-symbol-ai-assistant></c2-symbol-ai-assistant>
<c2-symbol-cookie-consent></c2-symbol-cookie-consent>
<c2-symbol-offline></c2-symbol-offline>

Size a symbol with --c2-symbol--size and recolour it through its roles. Setting --c2-symbol__backdrop--color to transparent removes the disc behind the artwork.

<style>
  .brand {
    --c2-symbol--size: 88px;
    --c2-symbol__primary--color: #7c3aed;
    --c2-symbol__primary-soft--color: #ede9fe;
  }
  .bare {
    --c2-symbol--size: 88px;
    --c2-symbol__backdrop--color: transparent;
  }
</style>
<c2-symbol-upload class="brand"></c2-symbol-upload>
<c2-symbol-upload class="bare"></c2-symbol-upload>
<c2-symbol-server-error class="bare"></c2-symbol-server-error>

In a status panel

Slot a symbol into the panel’s media slot and set media="illustration": the panel drops its tinted status disc (the symbol brings its own backdrop) and sizes the artwork with --c2-status-panel__illustration--size.

<style>
  .illustrated {
    --c2-status-panel__illustration--size: 128px;
  }
</style>
<c2-status-panel class="illustrated" 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-button slot="actions">Clear filters</c2-button>
</c2-status-panel>

A success state reads the same way:

<style>
  .illustrated-success {
    --c2-status-panel__illustration--size: 128px;
  }
</style>
<c2-status-panel class="illustrated-success" media="illustration" status="success" heading="Payment received" description="Your Pro plan is active. A receipt is on its way to your inbox.">
  <c2-symbol-payment-success slot="media"></c2-symbol-payment-success>
  <c2-button slot="actions">Go to dashboard</c2-button>
</c2-status-panel>

Accessibility

A symbol is decorative by default: its SVG is hidden from assistive technology, which is right when a heading next to it already says what it shows. When the picture carries meaning on its own, give it a label; it is then exposed as an image with that name.

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

Theming

API

Every symbol element shares the same API.

All symbols

No symbol matches.

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