Icon Guidelines - Seventh UI CSS

Figma Guideline Sources

Area	Node	Contract Value
Root	`160:787`	Canonical entry point for the icon guideline page.
Start	`160:881`	Defines icon purpose, simplicity, intentional usage, and cognitive-load reduction.
Anatomy	`160:853`	Defines export area, grid area, and icon drawing area.
Sizes and layout	`160:907`	Defines public sizes, default canvas, live area, padding, and base shapes.
Metrics	`160:1087`	Defines stroke, visual weight, optical corrections, pixel positioning, and click targets.
Colors	`160:854`	Defines monochrome behavior, contrast, text pairing, and component-owned states.
Best practices	`160:1791`	Defines grouped icon consistency, shared sizing, and center alignment with text.
Token-id icon	`161:2324`	Defines category-first naming, fill-style variants, and literal versus domain-specific IDs.

These section nodes are normative source references for future icon imports, documentation updates, and validation improvements. Automated validation remains strict only for rules that can be checked reliably from exported files.

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.