skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

icon-set-generator

Generate cohesive SVG icon sets with shared style specifications.

Updated Mar 26, 2026
Search Tags:#design system#visual consistency#svg#web assets#icon set#currentColor#preview html
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill icon-set-generator-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-set-generator
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/icon-set-generator
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill icon-set-generator-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates inconsistent, mismatched icon styles by generating a unified SVG icon set that looks like it belongs to the same product or website.

Core Features & Use Cases

  • Project-specific SVG icon generation: Produce a complete set of consistent icons (not generic library lookups) from a shared style specification.
  • Style specification and enforcement: Standardize viewBox, stroke attributes, padding, and optical corrections so every icon matches.
  • Preview and delivery artifacts: Generate a preview HTML for visual QA plus a style-spec.json to document the design rules.

Quick Start

Use the icon-set-generator skill to create a consistent SVG icon set for your website by generating the icons and a preview.html in a project icons folder.

Frequently Asked Questions about icon-set-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate consistent SVG icons for a web design system?▼

Generate consistent SVG icons by applying shared style rules like identical viewBox dimensions, root stroke attributes, and currentColor-only styling. This enforces visual consistency across navigation and action UI elements so the entire set matches.

What is currentColor styling for SVG web assets?▼

currentColor-only styling is an SVG formatting rule that forces icons to inherit text color from their parent HTML element. Applying this standard across an icon set ensures flexible theming and visual consistency for web assets.

How do I create a custom icon set with matching geometry and stroke styles?▼

Create a matching custom icon set by standardizing geometric constraints like identical viewBox, padding, and root stroke attributes. Enforcing these specifications before generation prevents mismatched visual proportions across your UI.

Can I preview generated SVG icons before integrating them into my website?▼

Preview generated SVG icons using an inline-preview HTML file. This visual QA artifact is created alongside the icons in your output folder, allowing you to verify visual consistency before integration.

Do I need a style-spec.json file to maintain visual consistency across SVG icons?▼

A style-spec.json file documents the design rules and shared attributes for your SVG icon set. It acts as the configuration source to enforce standardization, ensuring every generated icon matches the defined visual identity.

What are the limitations of generating project-specific SVG icon sets?▼

Limitations include strict SVG constraints: no root transforms or IDs, constrained coordinate precision, and mandatory currentColor-only styling. Deviating from these rules breaks the visual consistency of the generated web assets.

Related Skills

Explore More Design & Creative Skills→
MakingThingsWorkTorontoMakingThingsWorkToronto

svg-authoring

Guide SVG authoring for Visual Brainstorm icons and system maps.

Official
Intermediate
hamzaPixlhamzaPixl
2

svg-icon-creation

Create optimized SVG icons as TypeScript React components with ARIA attributes.

Community
Intermediate
mindmorassmindmorass
2

iconset-maker

Generate multi-platform icon sets from a single SVG or PNG source.

Community
Advanced
CozythecoderCozythecoder
4

svg-design

Generate hand-written SVG logos and icons with optimized markup.

Community
Intermediate