icon-set-generator
Generate cohesive, project-specific SVG icon sets with enforced visual consistency.
- Builds custom icon sets from a shared style specification, ensuring identical stroke weight, corner treatment, and visual density across all icons
- Supports five preset styles (Clean, Sharp, Soft, Minimal, Bold) tailored to different project aesthetics; recommends based on industry and brand vibe
- Includes industry-specific icon suggestions organized by category (navigation, communication, trust, actions) and reference implementations to prevent style drift
- Delivers SVGs using
currentColorfor CSS-driven theming, plus an HTML preview page and style-spec.json documenting the complete set
Icon Set Generator
Generate custom, visually consistent SVG icon sets tailored to specific projects. Each set is built from a shared style specification so every icon looks like it belongs with the others — same stroke weight, same corner treatment, same visual density.
Why This Matters
Generic icon libraries (Lucide, Heroicons) are great but every site using them looks similar. A custom icon set gives a project distinct visual identity. The hard part is consistency — drawing 20+ icons individually causes style drift. This skill solves that by defining style rules once and enforcing them across every icon.
Workflow
Step 1: Understand the Project
Ask about the project. You need enough to suggest icons and pick a style:
- What's the business/project? (industry, name, vibe)
- Any brand guidelines or colour palette? (informs style choices even though SVGs use currentColor)
- What feel? (modern, friendly, corporate, minimal, bold)
- Roughly how many icons? (typical small site: 15-25)
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktanstack-query
|
2.5Ktailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
2.3Kfastapi
|
2.0Kcolor-palette
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
1.9K