Icons

Icons in Rare Styles are not a font. The library ships its own SVG icon set — static cuts of Material Symbols Outlined (Apache-2.0) — self-hosted next to the stylesheet and drawn via CSS masks filled with currentColor. That buys three things: zero third-party requests in the shipped CSS, no icon-font download (~312 KB gone), and no flash of raw ligature text while a font loads.

Because the glyph is a mask filled with currentColor, an icon behaves like a character of text: font-size sizes it, color — or any color token in the cascade — colors it. No extra API to learn.

Usage

One class per icon — the glyph name is the class. Nothing else to add:

<span class="rd-icon-download"></span>

Renders: — and inherits the surrounding text color and size. Only names from the shipped set have a class; a typo just renders nothing rather than broken text.

Sizing and coloring are plain CSS — set them on the icon or any ancestor:

<span class="rd-icon-bolt" style="font-size: 2em; color: var(--orange)"></span>

Renders:

The set

143 glyphs, each in both weights: the library-core names consumed by Rare Styles' own components and docs, maintainer-selected extras, and every glyph the known consumer sites render — promoted into the one shared collection. Hover any icon for its name, click it to copy its markup — the glyph turns into a check when the snippet is on your clipboard.

The same set in the thin cut:

Component-owned icons

Library components don't carry an icon class in markup — they bake their glyph into their own class with the icon() mixin, so the markup stays semantic and empty:

// SCSS — the component owns the glyph
.collapsible-icon {
    @include ico.icon("keyboard_arrow_down");
}

// weight as the second argument for thin marks
.sidenote-link::before {
    @include ico.icon-mask("arrow_outward", 200);
}

icon() draws an inline 1em box on the element's ::before — the everyday form. icon-mask() emits only the mask box, for components whose ::before manages its own positioning and size (carousel arrows, sidenote markers). Both live in modules/decorations/_icons.scss.

Need an icon that isn't here?

The set covers what the Rare Styles ecosystem actually uses, so it is deliberately finite. If the glyph you need has no .rd-icon-* class:

• Quick, one-off: pull in the Material Symbols font for that single page and use it directly — the SVG set is extracted from the same family, so a glyph you add this way matches the ones the library ships.

  <link rel="stylesheet"
        href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined">
  <span class="material-symbols-outlined">rocket_launch</span>
  

• Properly, for good: open an issue or a pull request on the Rare Styles repo asking for the glyph. Once it lands in the set it ships in both weights with a real .rd-icon-* class, and the one-off font link can go.