Glyph

Every icon in Okami, drawn: a Hugeicons icon in the text colour, its line (1.875, 1.25px at 16px, in proportion at every size) in balance with the text beside it, hidden from assistive tech. The family and its rules are on Foundations → Iconography.

Sizes

import { Glyph } from "@/components/shared/glyph";
import { InboxIcon } from "@hugeicons/core-free-icons";

<Glyph icon={InboxIcon} className="size-4" />
<Glyph icon={InboxIcon} className="size-5" />

In the text colour

<Glyph icon={Call02Icon} className="aura-muted size-4" />

Okami's mark

import { OkamiIcon } from "@/components/shared/dot-mark/okami-mark";

<Glyph icon={OkamiIcon} className="size-4" />

Guidelines

Pass the icon itself — Hugeicons' data — to Glyph and to any component that takes one (leadingIcon, icon): it's plain data, so a server page can hand it to a client component.
Size it with a class (size-4); never pass a stroke: the line is 1.875 at every size (1.25px at 16px), so it scales with the icon.
A brand's mark or a glyph that animates (GoogleMark, the copy button's tick) can be an SVG component of our own; Glyph draws it the same way.

API

Prop	Type	Default	Description
icon	Icon	—	A Hugeicons icon (IconSvgElement), OkamiIcon, or one of Okami's own SVG components.
className	string	—	Its size (size-) and colour (text-, aura-muted).
aria-hidden	boolean	true	Decoration by default: the words beside it say what it is.