Icon Guidelines - Seventh UI CSS

Intent

Use icons only when they clarify an action, command, section, content type, or concept. If an icon does not reduce cognitive load, do not add it.

Anatomy And Grid

Canvas

Export standard system icons on a 24x24 canvas.

Live Area

Keep a 20x20 visual area with effective 2px padding.

Base Shapes

Use square, circle, vertical, or horizontal bases to preserve visual balance.

Sizes And Targets

16

20

24 default

32

48

Icon-only interactive controls must use at least --sui-dimension-interactive-min and should prefer --sui-dimension-interactive-comfortable when layout allows.

Rules

Color

Use solid monochrome icons. Pair icon color with text color and keep contrast at least 4.5:1.

States

Interaction states belong to the background or component, not to the standalone icon asset.

Stroke

Use a consistent 2px stroke for outline icons when the glyph supports stroke.

16px

Prefer filled glyphs at 16px to preserve readability.

Alignment

Center-align icons with text. Do not align by baseline or top edge.

Groups

Use matching icon sizes and matching fill patterns inside the same element.

Naming

Keep the Figma source name as metadata. Public names should normalize category and id to kebab-case during export.

Figma name: Access/Door Outline
Public name: access-door-outline

Figma name: User/User Check
Public name: user-user-check

Export Checklist

Check	Requirement
Source	Record file key, Figma node id, original name, public name, and category.
Canvas	Use `viewBox="0 0 24 24"` for standard monochrome icons whenever possible.
Color	Use `currentColor` for monochrome SVGs when technically possible.
Geometry	Prefer integer coordinates and document any optical correction.
Accessibility	Decorative icons must be hideable; icon-only controls need an accessible name.