Icon tool

The icon tool (I) stamps vector icons as their own layer kind. Icons are SVG paths under the hood, so they scale crisp at any size and can be tinted, stroked, and effected like shapes.

#Picking an icon

The icon panel exposes a searchable grid. Search by name or category. The bundled set is curated — Heroicons-solid + Heroicons-outline + Lucide + a small extras set — and updated alongside editor releases.

Each entry shows:

• The icon glyph
• Its name (used as the layer's default label)
• Its weight (where applicable — outlined icons can change stroke weight)

#Placing

The default stamp size is configurable in the panel — handy when you're placing many same-size icons.

#Tinting

Icons are monochrome by default. Pick any color in the panel and the icon paints in that color. The original SVG paths are still preserved internally — change the tint at any time without re-loading the icon.

#When to use icon vs. asset

• Use icon when you want a small UI-style symbol from the bundled library, tinted to fit the design.
• Use asset when you have your own SVG / image — a logo, a custom mark, a photograph.

Both produce a layer with similar transform / effect controls, but asset layers also support frame-clipping, AI background removal, and per-asset image adjustments (Curves / Levels / HSL).

#Layer data shape

interface IconLayerData {
  id: string
  type: 'icon'
  iconId: string         // 'heroicons-solid:heart'
  x: number; y: number
  width: number; height: number
  rotation: number
  color: string          // tint
  weight?: number        // outline-style icons only
  opacity: number
  blendMode: BlendMode
  effects?: LayerEffects
  // ...
}