Foundations

Iconography

Tabler Icons outline set. MIT. Default 24. currentColor. Ether sizes 16 / 20 / 24. Do not mix Tabler with custom glyphs. Fill only for state (selected, on, status) — use Tabler filled variants only then. Mixing outline and fill in one toolbar is a defect.

The Ether signal-ring brand mark is not a UI icon. Do not replace it with a Tabler glyph.

Accessibility

A meaningful icon gets aria-label of the action, not the shape. The control is “Search”, not “Magnifying glass.”
Decorative icons, or icons next to visible text, are aria-hidden="true".
Hit target 44×44 even when the glyph is 24.
Color is never the only meaning. Critical is the word plus the icon plus the hue.

Style

Family: Tabler Icons, outline. Stroke is Tabler's (2). Do not redraw the paths.
Sizes: 16 (caption only), 20, 24 default. Do not invent 18.
currentColor. It takes the text color of the parent.
Markup: <i class="ti ti-<name> eth-icon eth-icon--24" aria-hidden="true"></i>
Outlined default. No filled icons except selected / on / status.

Naming

Purpose, not shape. Ether token names stay the job (filter not funnel). Implementation maps to a Tabler class.

Keywords exist for search: “funnel” is a keyword on filter. The token name stays the job.

Grid

24 box on the 4px grid. Pairs with 16 body. 16-box only with caption. See Layout and Typography.

Reserved

Never reuse these names for a different job. Never rotate one to fake another. Do not rotate add (plus) to make close (x). If it needs a tooltip to be understood, the icon is wrong.

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

Also used in demos:

Ether name	Tabler icon	Class
upload	upload	`ti ti-upload`
download	download	`ti ti-download`
user	user	`ti ti-user`
info	info-circle	`ti ti-info-circle`
positive	circle-check	`ti ti-circle-check`
external	external-link	`ti ti-external-link`

Guidelines

Do	Don't
Default 24. One icon per action. Tabler outline.	Custom `<path>` glyphs next to Tabler. Dashboards do not get mascots.
Name by purpose. Map to Tabler.	The wordmark as a control. ETHER is not a button.
Status fill only when the state is on.	Mix outline and fill in one toolbar. Rotate plus to make x.
Pair 24 with body, 16 with caption.	Draw a new metaphor when a reserved name exists.

Reserved set

Tabler outline. Default 24. currentColor. Ether sizes 16 / 20 / 24. Stroke is Tabler's (2). Fill only for state — this grid is outline.

add

delete

filter

settings

check

caution

critical

chevron-down

chevron-inline-end

export

refresh

range