Icons

A mask-based icon set painted with currentColor — zero external requests, including layout & builder icons (align, flex, columns, sizing) and app-chrome marks. Search by name; click any icon to copy its markup.

Browse

The set ships as the optional keel-icons.css (~65 KB min) — link it after keel.css to use .k-icon--<name>. Includes an opt-in set of social brand marks (facebook, x, instagram, github, youtube, …) for footers — with the honest caveat that brand marks date (x was a bird once), so treat them as convenience, not canon.

Clicking an icon:

— build a custom keel-icons.css with only what you need.

Using an icon

An icon is a span with two classes — the base .k-icon and a --name modifier. It takes the surrounding text color and font-size, so it aligns like a letter:

<p>Saved <span class="k-icon k-icon--check-circle"></span></p>

Decorative by default — add aria-hidden="true". If an icon carries meaning on its own (an icon-only button), give it role="img" and an aria-label, or label the button instead.

Size & color

Both are inherited, so you style the parent, not the icon. Here the same k-icon--star at three sizes and two colors:

<span class="k-icon k-icon--star" style="font-size: 2rem; color: var(--k-accent)"></span>

Framing an icon

The glyphs are bare on purpose. To give one a background, border, or shape — the "feature icon" look — wrap it in a .k-icon-box. Every part is a modifier, and they compose: shape (--circle, --soft, --sharp), fill (--solid, --outline, --ring, --flat), size (--sm/--lg/--xl), and color (--ok, --warn, --danger, --secondary, --neutral). The corners follow your --k-radius, so it stays on-system.

<span class="k-icon-box k-icon-box--circle k-icon-box--solid">
  <span class="k-icon k-icon--rocket" aria-hidden="true"></span>
</span>

<!-- outline + status color + large -->
<span class="k-icon-box k-icon-box--outline k-icon-box--ok k-icon-box--lg">
  <span class="k-icon k-icon--check" aria-hidden="true"></span>
</span>

<!-- tune any one box with the knobs directly -->
<span class="k-icon-box" style="--k-icon-box-size: 4rem; --k-icon-box-bg: var(--k-accent-2-soft)">…</span>

In buttons

Icon buttons pair .k-btn--icon with an icon and an aria-label; text buttons just put an icon before the label. See Actions.

Bring your own

The .k-icon mechanism is in the core file — you can point it at any SVG without the set. Set --k-icon to a URL-encoded data: SVG (use black as the fill/stroke; the mask ignores color and takes currentColor):

.k-icon--my-mark {
  --k-icon: url("data:image/svg+xml,%3Csvg …%3E");
}