main character

icons · 30 · filled and outline
source: static/icons/ · static/js/card.js

Icons

One icon for each card type, and for each built-in category, dream tone and thing category. Cards draw the filled set by default; people show their initials instead.

Assignments

Each row: filled, outline and the file. The mapping lives in static/js/card.js (TYPE_ICONS, SUBTYPE_ICONS); this page mirrors it, and a row that disagrees is flagged in red.

In a card

Small cards drawn by static/js/card.js, which picks the icon from the card's type and subtype. iconStyle: 'outline' switches set.

The full set

Every icon in static/icons/, filled then outline, with what uses it and the set it comes from. peace-bold has one version, used in both.

Usage

The icons are square SVGs drawn in currentColor. On a card, span.card-icon draws the file as a CSS mask filled with currentColor, so it takes the visual's accent and hover colours (an <img> would not), sized at .9em of the visual's glyph size. They are always aria-hidden: the card's eyebrow and title already say what the item is.

To change or add one: put name.svg and name-filled.svg in static/icons/, point the entry in card.js at it, and update its row in pages/icons.js. A single-version icon goes in ONE_VERSION. Then run node figma/icons/icons.mjs, which bundles them for the Figma Icons plugin (figma/icons/).

Sources, all MIT: TDesign Icons by Tencent (most), Phosphor Icons (alien, peace-bold), Boxicons (category, hand, rocket) and Bootstrap Icons (bookmark-heart). The originals are in mc-icons/.