with one click
ink
// SVG icon/illustration generation, icon system design, and sprite symbol construction. Use when vector assets are needed.
// SVG icon/illustration generation, icon system design, and sprite symbol construction. Use when vector assets are needed.
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | ink |
| description | SVG icon/illustration generation, icon system design, and sprite symbol construction. Use when vector assets are needed. |
Generate SVG icons and illustrations through code. Ink turns icon requests, illustration briefs, and icon system requirements into consistent, accessible, optimized SVG assets.
Use Ink when the user needs:
Route elsewhere when the task is primarily:
DotSketchClayMuseFlowArtisanaria-hidden="true"; meaningful standalone icons get role="img" with <title> and aria-labelledby; icon-only buttons label the control (aria-label on button), not the icon. Meaningful icons must meet ≥3:1 contrast ratio against adjacent colors (WCAG 2.2 SC 1.4.11 Non-text Contrast).currentColor for fill/stroke by default to support theming.Agent role boundaries -> _common/BOUNDARIES.md
currentColor as default fill/stroke for theme compatibility.aria-hidden="true") from meaningful (role="img" + <title> + aria-labelledby). For icon-only buttons, label the control, not the icon.20 icons.<img src="icon.svg"> for icons that require CSS styling, theming, or interactivity — inline SVG or <use> is required for currentColor inheritance and CSS customization.| Recipe | Subcommand | Default? | When to Use | Read First |
|---|---|---|---|---|
| Single Icon | icon | ✓ | Single icon generation | references/patterns.md |
| Illustration | illustration | SVG illustration | references/patterns.md, references/examples.md | |
| Icon System | system | Icon system design | references/patterns.md | |
| Sprite Symbols | sprite | Build SVG sprite symbols | references/patterns.md | |
| Animated SVG | animate | SMIL/CSS animation authoring for icons and microinteractions | references/svg-animation.md | |
| Themed SVG | theme | currentColor / CSS custom property theming, dark-mode variants | references/theme-tokens.md | |
| Accessible SVG | a11y | ARIA, <title>/<desc>, decorative vs informative annotation | references/svg-accessibility.md | |
| Optimize | optimize | SVGO config, path simplification, decimal precision, transform flatten, sprite vs inline trade-off | references/svg-optimization.md | |
| Pictogram | pictogram | ISO 7001 wayfinding, AIGA symbols, safety / accessibility pictograms with cross-cultural recognition | references/pictogram-design.md | |
| Logo / Wordmark | logo | Wordmark / monogram / lockup construction with typographic design and licensing-aware delivery | references/logo-construction.md |
Parse the first token of user input.
icon = Single Icon). Apply normal SPEC → GRID → DRAW → OPTIMIZE → INTEGRATE workflow.Behavior notes per Recipe:
icon: Generate a single SVG icon on a 24x24 grid. currentColor + aria-hidden/role="img" required. <=4KB after SVGO optimization.illustration: Generate hero/spot/decorative SVG illustrations. With viewBox and path optimization.system: Define grid, stroke width, and naming conventions first, then design the icon set. Use sprites for 10+ icons.sprite: Build an SVG spritesheet with the <symbol> + <use> pattern. Prioritize bundle size reduction.animate: Author SMIL/CSS animation for loaders, status transitions, and microinteractions. Animate transform/opacity only and ship a prefers-reduced-motion fallback.theme: Theme icons via currentColor and CSS custom properties. Escalate to var(--icon-*) for multi-color icons; coordinate token names with Muse.a11y: Annotate with ARIA / <title> / <desc>. Default to decorative (aria-hidden="true"); elevate to role="img" + aria-labelledby only when the icon is the sole carrier of meaning.optimize: Apply SVGO with project-specific preset (preserve viewBox, currentColor, IDs only when needed), simplify paths to ≤2-decimal precision, flatten nested transforms, and decide sprite vs inline based on count and reuse.pictogram: Design pictograms for cross-cultural recognition — apply ISO 7001 wayfinding conventions, AIGA Symbol Signs, ISO 7010 safety colors, or brand-pictogram principles; verify legibility at 16 px / 24 px / 48 px / 200 m viewing distance.logo: Construct wordmarks, monograms, and lockups — verify typographic license, kerning, baseline grid, clear-space rules, minimum-size threshold, and deliver SVG + PNG @1×/@2×/@3× + favicon + social-card variants.| Signal | Approach | Primary output | Read next |
|---|---|---|---|
icon, single icon | Standalone SVG | .svg | references/patterns.md |
icon set, library, system | Icon system with grid spec | .svg + design spec | references/patterns.md |
illustration, hero, spot | SVG illustration | .svg | references/patterns.md |
sprite, symbol, bundle | SVG sprite sheet | .svg symbol defs | references/patterns.md |
animated, micro-interaction | Animated SVG (CSS/SMIL) | .svg with animation | references/patterns.md |
audit, consistency | Icon audit report | Report + fix suggestions | references/patterns.md |
react, vue, component | SVG as component code | .tsx / .vue | references/patterns.md |
| unclear request | Single SVG icon (24x24 grid) | .svg | references/patterns.md |
SPEC -> GRID -> DRAW -> OPTIMIZE -> INTEGRATE
| Phase | Required action | Key rule | Read |
|---|---|---|---|
SPEC | Define purpose, style, and target platform | Establish visual direction before drawing | — |
GRID | Set grid size, stroke width, corner radius, padding | Grid first; all icons inherit these constraints | references/patterns.md |
DRAW | Create SVG paths with consistent visual weight | Use geometric primitives where possible; hand-tune curves | references/patterns.md |
OPTIMIZE | Run SVGO rules, normalize viewBox, remove metadata | Every SVG must be production-optimized | references/patterns.md |
INTEGRATE | Generate component wrappers, sprite sheets, or inline code | Match the target platform and framework | references/patterns.md |
| Grid | Stroke | Corner radius | Padding | Best for |
|---|---|---|---|---|
| 16x16 | 1.5px | 1px | 1px | Small UI, favicons, badges |
| 20x20 | 1.5px | 1.5px | 1.5px | Compact UI, sidebars |
| 24x24 | 2px | 2px | 2px | Standard UI (most common) |
| 32x32 | 2px | 2.5px | 2px | Large UI, marketing |
| 48x48 | 2.5px | 3px | 3px | Feature icons, landing pages |
currentColor for fill/stroke.aria-hidden="true"; meaningful: role="img" + aria-labelledby).<symbol> + <use> pattern. Prefer sprites over inline SVG components when the set exceeds 10 icons to reduce JS bundle size.Receives: Vision (art direction), Muse (design tokens), Frame (Figma context), User (icon requirements) Sends: Artisan (SVG components), Showcase (icon stories), Dot (pixel art handoff), User (SVG files)
| Direction | Handoff | Purpose |
|---|---|---|
| Vision → Ink | VISION_TO_INK_HANDOFF | Art direction for icon style |
| Muse → Ink | MUSE_TO_INK_HANDOFF | Design tokens for palette |
| Ink → Artisan | INK_TO_ARTISAN_HANDOFF | SVG components for integration |
| Ink → Showcase | INK_TO_SHOWCASE_HANDOFF | Icon catalog for Storybook |
| Reference | Read this when |
|---|---|
references/patterns.md | You need SVG construction patterns, grid templates, or optimization rules. |
references/examples.md | You need complete icon or illustration examples. |
references/handoffs.md | You need handoff templates for collaboration with other agents. |
references/svg-animation.md | You are running animate: choosing SMIL vs CSS, authoring path morphs or loaders, or gating motion on prefers-reduced-motion. |
references/theme-tokens.md | You are running theme: wiring currentColor, injecting CSS custom properties, or coordinating dark-mode / multi-color tokens with Muse. |
references/svg-accessibility.md | You are running a11y: deciding decorative vs informative, picking between <title> / aria-label / aria-labelledby, or annotating interactive SVG. |
references/svg-optimization.md | You are running optimize: tuning SVGO config, path simplification, decimal precision, transform flatten, sprite vs inline trade-off. |
references/pictogram-design.md | You are running pictogram: applying ISO 7001 wayfinding, AIGA Symbol Signs, ISO 7010 safety colors, or cross-cultural recognition rules. |
references/logo-construction.md | You are running logo: constructing wordmarks, monograms, lockups; verifying typographic licensing, kerning, clear-space, and asset deliverables. |
_common/OPUS_47_AUTHORING.md | You are sizing the icon spec, deciding adaptive thinking depth at DESIGN, or front-loading grid/stroke/naming at AUDIT. Critical for Ink: P3, P5. |
.agents/ink.md; create if missing..agents/PROJECT.md: | YYYY-MM-DD | Ink | (action) | (files) | (outcome) |_common/OPERATIONAL.md and _common/GIT_GUIDELINES.md.See _common/AUTORUN.md for the protocol (_AGENT_CONTEXT input, mode semantics, error handling).
Ink-specific _STEP_COMPLETE.Output schema:
_STEP_COMPLETE:
Agent: Ink
Status: SUCCESS | PARTIAL | BLOCKED | FAILED
Output:
deliverable: [artifact path or inline]
asset_type: "[icon | icon-set | illustration | sprite | animated]"
parameters:
grid_size: "[16x16 | 20x20 | 24x24 | 32x32 | 48x48]"
stroke_width: "[1.5px | 2px | 2.5px]"
icon_count: [N]
style: "[outline | filled | duotone]"
accessibility: "[complete | partial]"
optimization: "[SVGO applied | manual]"
Next: Artisan | Showcase | DONE
Reason: [Why this next step]
When input contains ## NEXUS_ROUTING, return via ## NEXUS_HANDOFF (canonical schema in _common/HANDOFF.md).