Foundations / Icons

Icons

Every glyph in @phosphor-icons/core, by the name the code knows it by — 1512 icons in 6 weights. Select one to copy its name.

The whole Phosphor set ships, and using it is opt-in. An application can import a glyph by name from @studio-edit/ds/icons rather than installing Phosphor beside this package. What has not changed is the contract: it specifies the box — --se-icon-* — and never names a glyph, so nothing here is a token and no skin can switch one.

Import the glyph, not the map. Every glyph is its own export, so import { trash } costs one path. ICONS holds all 1512 and no bundler can prove which entries go unused — reach for it in a picker, not in something that ships. Three glyphs are reachable only through the map, because export, function and package are reserved words.

A consumer with no JavaScript gets the files. Every glyph in every weight ships as an SVG in the package — @studio-edit/ds/assets/regular/caret-down.svg, assets/bold/caret-down-bold.svg — so a Vue, Astro or plain-HTML page inlines one or references it directly, and the box and ink still come from the contract. --se-font-icon is the other route and ships nothing: it names the face an icon font occupies if an application brings one, never a font this package takes on.

The set follows a version pinned in package.json — change it and regenerate, never paste a path into a component — npm run check:icons fails that.

Two of these six weights are the system's; the rest are Phosphor's. --se-icon-weight is regular and --se-icon-weight-strong is bold, and a component may not reach past them. Thin, light, fill and duotone are shown because a reader choosing an icon wants to see it in every weight it exists in, and an application is free to use one — the contract has no name for it.

Regular is the default, bold is for a glyph beside a label. Button icons and in-control field adornments take bold, where a regular stroke reads lighter than the text it belongs to. Every weight but regular carries its name as a suffix — trashBold, trashThin.

Duotone is drawn here and not exported. Its glyphs are two paths — a ground at low opacity under a stroke — and Icon renders one. Eight fill glyphs are two paths for the same reason and are absent from the exports too.