Components

Icon

Tabler Icons outline. currentColor. Default 24. Not interactive alone.

Spec

Family: Tabler Icons, outline. Do not mix with custom glyphs.
currentColor. It takes the text color of the parent.
Sizes: 16 (caption only), 20, 24 default. Do not invent 18.
Markup: <i class="ti ti-<name> eth-icon eth-icon--24" aria-hidden="true"></i>
Stroke is Tabler's (2). Fill only for state — use Tabler filled variants only for selected / on / status.
Not a control by itself. Pair with a Button or Link.
Next to text: aria-hidden="true".
Reserved names: add, close, delete, search, filter, settings, menu, more, check, caution, critical, chevron-down, chevron-inline-end, export, refresh, range.
Never rotate add (plus) to fake close (x). Never reuse a reserved name for a different job.

Ether name → Tabler: add → plus, close → x, delete → trash, search → search, filter → filter, settings → settings, menu → menu-2, more → dots, check → check, caution → alert-triangle, critical → alert-circle, chevron-down → chevron-down, chevron-inline-end → chevron-right (RTL scaleX(-1)), export → file-export, refresh → refresh, range → calendar.

Live demo

Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.

Reserved set — Tabler outline, 24 default, currentColor

add

delete

filter

settings

check

caution

critical

chevron-down

chevron-inline-end

export

refresh

range

16 caption / 20 / 24 default

Do / Don't

Do	Don't
24 next to body. 16 with caption. Tabler outline.	18px, filled mascots, custom paths, or a new metaphor for a reserved job.
`aria-hidden` beside a visible label.	A bare glyph with a click handler. Rotate plus to make x.

Motion

Icons don't idle-animate. Rotate only when the spec says so (accordion chevron 160ms). Rotate the <i>.

Property	Duration	Easing	Trigger	Reduced motion
`rotate(90deg)`	160ms `--dur-exit`	`--ease-out`	expand	instant

Accessibility

Meaningful standalone icons: the control has aria-label of the action, not the shape. “Search”, not “Magnifying glass.”
Hit 44×44 on the control even when the glyph is 24.
These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.