Icon System

The E² icon system defines small interface glyphs optimized for technical clarity, compact UI use, and predictable SVG implementation.

Purpose

Icons communicate actions, interface states, navigation patterns, or compact object references. They are not illustrations and must remain simple at small sizes.

Baseline parameters

Stroke model

Use 1.5 px as the default stroke at 24 px because it gives E² a precise, technical visual identity without becoming too fragile.

Alignment rules

Thin strokes require explicit alignment discipline.

• 1 px strokes align best on 0.5 px coordinates.
• 1.5 px strokes align best on 0.75 px coordinates.
• 2 px strokes align best on whole-pixel coordinates.

Geometry rules

• Keep icons simple and structurally readable.
• Use no more than three primary primitives.
• Avoid dense intersections.
• Prefer optical balance over mathematical symmetry.
• Maintain at least 2 px internal breathing room where possible.
• Do not fill icons unless the filled region is essential to recognition.

Illustrator setup

Use:

Artboard: 24 × 24 px
Units: pixels
Gridline every: 1 px
Stroke: 1.5 px
Cap: round
Join: round
Align stroke: center

Disable Align to Pixel Grid when working with 1.5 px strokes. Manually validate export output instead.

SVG requirements

Required attributes:

viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"

Use vector-effect="non-scaling-stroke" only when implementation requires non-scaling strokes. Do not add it by default unless the consuming environment expects it.

Do

• Use icons for compact UI meaning.
• Test at 16, 20, 24, and 32 px.
• Preserve strokes in SVG.
• Keep names semantic.

Do not

• Scale up icons and use them as illustrations.
• Add decoration that does not improve recognition.
• Use hidden shapes to force alignment.
• Export with unnecessary transforms.