Icon

Live demo

home

chart

dumbbell

user

plus

check

arrow-right

chevron-right

bell

settings

download

trend-up

info

alert

How to use it

Outline icons drawn on a 24px grid with a 1.75 stroke in currentColor; use them for UI glyphs, never emoji.

Provide name and optionally size (sm 16, md 20, lg 24, or a number).
Give label only when the icon stands alone and carries meaning; decorative icons stay hidden from screen readers.
The built-in set covers the system's own needs. In real apps use Lucide (lucide-react, lucide-react-native) at the same 1.75 stroke so everything matches.

Don't: fill icons, mix icon families, or color an icon with anything but --e-ink, --e-ink-2 or --e-accent-ink.

In every theme

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

Code

React

import { Icon } from 'enma/react';

<Icon name="trend-up" />
<Icon name="alert" size="lg" label="Overdue" />

Plain HTML

<svg class="e-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
  stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M4 16l6-6 4 4 6-6M14 8h6v6" />
</svg>

Props

`IconProps`

Props of IconProps
Prop	Type	Default	Description
`name` required	IconName
`size`	'sm' \| 'md' \| 'lg' \| number	'md'
`strokeWidth`	number	1.75
`label`	string		Give a label only when the icon carries meaning on its own.
`className`	string
`style`	React.CSSProperties