Skip to content

Work / Trunk / Wiki / Surfaces

icons-editor

Surfacecanonicalverified 2026-10-19

SURFACE.WEB.STYLES-ICONS.ICONS-EDITOR

Summary

Draw a new icon, or change one, on a 24 px grid: pen, shapes, boolean operations, keylines, and a live preview at three sizes.

Raw wireframe

  • .context/designs/web/styles-icons/icons-new.html
  • .context/designs/web/styles-icons/icons-edit.html — an icon opened to be changed

Why it is drawn this way

A vector editor, like Figma's, scoped to one icon: the grid, keylines, and points you can move.

The inspector sets the stroke to match the set, and previews 16, 20 and 24.

Save to draft. An icon opened from its inspector comes in as shapes on the grid, scaled from its own viewBox, with its stroke; saved, the draft points it at the new drawing.

Related

Sources

  • .context/designs/web/styles-icons/icons-new.html
  • The owner's instructions in the sessions of 2026-10-14 and 2026-10-15.