Features

Draw

Vector editor in the browser. Purpose-built for icons — every feature assumes a constrained canvas and systematic consistency. Hardware-accelerated canvas rendering.

• Pen tool (P): click for corners, drag for curves, endpoint merge, midpoint insertion
• Shapes: rectangle (R), ellipse (O), polygon (Y), star (U) with corner radius
• Booleans: union, subtract, intersect, exclude — select two shapes, pick an operation
• Node editing: double-click to isolate a shape, edit points and handles directly
• Curve assist: harmonize, supersmooth, dekink, tunnify — one-key fixes for common curve problems
• Transform: move, scale (8 handles), rotate, flip H/V, nudge with Shift/Option modifiers
• Selection: click, Shift+click, marquee, lasso, crossing-segment selection
• Scissors (K): split a path at any segment
• Groups: Cmd+G to group, Cmd+Shift+G to ungroup, recursive transforms
• Measurement: hover to see stem thickness, perpendicular ray-cast readout
• Curvature comb: Speed Punk-style overlay showing curvature magnitude per segment
• Tuner: take snapshots, interpolate/extrapolate between them with a slider
• Snap: grid snap (G toggle), alignment guides, custom draggable guides from rulers

→ Drawing guide

Organize

Grid view for browsing. Tags, categories, and status from a taxonomy built across 11,657 concepts from 7 icon sets.

• Grid view: search by name or tag, filter by category, drag reorder
• Naming: validation against taxonomy — green check for known names, suggestions for unknowns
• Tags: auto-suggest from taxonomy with cross-set frequency badges
• Categories: auto-derived from taxonomy with coverage indicators
• Icon status: draft → review → production → deprecated
• Layer panel: auto shape detection (Circle, Square, Triangle...), SVG thumbnails, tree-aware drag reorder with reparenting
• Diagnostics: 9 automated checks (kinks, near-vertical, short segments, duplicate nodes, open paths, zero area, fractional coords, tiny paths) with severity dot per icon
• Coverage dashboard: per-category progress bars showing set completeness
• Working set: multi-select icons, double-click to open as a working set, Cmd+Left/Right to cycle

→ Organizing guide

Style

Per-path fill, stroke, and opacity. Color palette management at set level. Semantic tokens for design system integration.

• Fill: solid color per path, currentColor on export
• Stroke: weight, cap (butt/round/square), join (miter/round/bevel)
• Opacity: per-path and per-group (groups composite as a unit)
• Color palette: set-level palettes with slot-based icon assignment
• Semantic tokens: named aliases (action.delete → trash), icon picker, CSV import, round-trip through export pipeline
• Reference ghost (Shift+G): overlay icons from Lucide, Phosphor, Tabler, Bootstrap, Feather, or Material as drawing reference

→ Visual properties guide

Publish

Cmd+S saves to GitHub. Push triggers an automated pipeline. Optimized SVGs land on CDN.

• One-key save: Cmd+S commits to a GitHub repository via GraphQL batch
• Automated pipeline: validates icons, optimizes SVGs, generates AVD XML, deploys to GitHub Pages
• CDN URLs: {user}.github.io/{repo}/svg/{icon}.svg — live after pipeline runs
• Conflict resolution: detects concurrent edits, per-icon merge UI
• Multi-tab sync: edits broadcast across browser tabs, GitHub HEAD polling
• Per-icon revert: restore any icon to its last saved state
• Undo/redo: snapshot-based, 300ms coalesce, bulk operations as single entry

→ Publishing guide

Import

Migrate existing icon sets. Coordinate transforms handled automatically — Y-flip for font tools, viewBox normalization.

• SVG files: full CSS cascade, attribute inheritance, group hierarchy, clip-path
• SVG sprites: extract <symbol> elements
• GlyphsApp .glyphs files (v2 + v3)
• Font files: .otf, .ttf, .woff via opentype.js
• Smart corner detection: auto-unbake arc patterns on import
• Naming enrichment: alias-aware semantic linting on import

→ Import guide

Export

The pipeline produces everything a developer needs. Runs automatically in GitHub Actions after every save.

• Optimized SVG: currentColor, aria-hidden, minified paths
• Android VectorDrawable XML with dp sizing
• npm package: tree-shakeable ESM, per-icon modules, TypeScript declarations
• Framework components: React, React Native, Vue, Svelte, Web Components
• Swift Package (SPM) with IconView SwiftUI component
• Gradle package with R.drawable references
• Iconify JSON for ecosystem registration
• Browse page: self-contained HTML with search, category chips, copy-to-clipboard
• Changelog page: diff-based added/removed/modified between exports
• Accessibility: ARIA injection, WCAG contrast validation, touch target checks
• Semantic tokens: resolve through pipeline, appear in npm metadata and design system docs
• Design system docs: DESIGN-SYSTEM.md + llms.txt + CONTRIBUTING.md auto-generated

→ Packages

Integrate

CLI for CI pipelines. MCP server for AI agents. Extensions for VS Code and Figma.

• CLI (@justdraw/cli): v0.3.2, 161KB, zero runtime deps — validate, export, npm-gen, framework-gen, iconify-gen, notify
• MCP server (@justdraw/mcp): v0.1.0 — 21 tools, 2 resources, 4 prompts for AI agent icon search and validation
• Consumer SDK: createIconSet(url) client with manifest caching, SVG caching, search, injectIcons() DOM helper
• Dynamic render API: /api/render/{owner}/{repo}/{icon}?color=FF0000&sz=24 — color and size transforms on the fly
• VS Code extension: icon picker, token search, semantic display (built, not yet published)
• Figma plugin: sync icons from CDN into Figma components with override preservation (built, not yet published)
• CDN worker: Cloudflare reverse proxy at cdn.justdraw.dev with CORS and caching (built, not yet deployed)
• WhatTheIcon: drop an SVG to identify its icon set — exact match via path hashing against 248K+ indexed icons
• Demand intelligence: signal collection from editor, VS Code, and MCP — tracks what icons teams search for

→ Packages · → Status

Coming Soon

• Animation (JustMove): sidebar authoring with SMIL/CSS SVG export (spec written, panel hidden)
• Accessibility audit: keyboard navigation, screen reader, contrast, reduced-motion
• Offline editing: full create/edit/undo without network
• shadcn adapter: tree-shakeable npx shadcn format

→ Full status