Generate cohesive, project-specific SVG icon sets for websites and applications. Use this skill whenever the user needs custom icons, an icon set for a website or app, icons for a client project, or mentions needing SVG icons that look consistent together. Also trigger when the user describes a project and icons would naturally be part of the deliverable — e.g. 'I'm building a site for a plumber' implies they'll need service icons. Trigger on: 'icons for', 'icon set', 'custom icons', 'SVG icons'
Icon Set Generator produces cohesive, project-specific SVG icon sets for websites and applications. It solves the consistency problem of custom iconography: drawing 20+ icons by hand causes style drift, and generic libraries like Lucide or Heroicons make every site look the same. This skill defines a shared style specification once — stroke weight, corner treatment, caps and joins, visual density — and enforces it across every icon so the set reads as a single system while giving the project a distinct identity.
The workflow is a five-step process: understand the project (industry, vibe, rough icon count), suggest icons grouped into navigation, communication, trust, actions, and industry-specific sets, define the style spec from presets (Clean, Sharp, Soft, Minimal, Bold), generate icons in small batches with visual review for consistency, and deliver an `icons/` directory containing individual SVG files, a `style-spec.json`, and a `preview.html`. Hard SVG rules enforce quality: use `currentColor` only (never hardcoded colors), an identical viewBox on every icon, minimal clean paths with limited decimal precision, and optical rather than purely mathematical centering. Reference files supply industry-specific icon suggestions, full preset definitions, and worked SVG examples for common shapes. The skill is marked claude-code-only.
The target users are web designers, developers, and agencies building sites or apps that need a distinctive, consistent icon set — for example a tradesperson's website or a small business app. Use cases include generating a 15–25 icon set for a client project, establishing a house icon style, and producing a visual preview page for sign-off.
Those libraries are fine but make many sites look alike. This skill generates custom SVGs from a shared style specification, giving a project distinct visual identity while keeping every icon consistent in stroke, corners, and density.
An icons/ directory with individual SVG files, a style-spec.json capturing the chosen style, and a preview.html page presented first so you can review the complete set visually before use.
Every icon must use currentColor only, share an identical viewBox, follow the selected preset's stroke width and corner radius, and use minimal paths with limited decimal precision. Icons are generated in batches of about five with a consistency review between batches.
Five presets — Clean, Sharp, Soft, Minimal, and Bold — varying stroke width, caps and joins, and corner radius. The skill recommends one based on the project's feel and confirms before generating.
Yes. The skill's frontmatter marks it as claude-code-only, so it is intended to run within Claude Code where it can write the SVG files and preview page to disk.
Quick Setup:
.claude/skills/Repository
jezweb/claude-skills