skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

icon-set-generator

Generate consistent custom SVG icon sets with a shared style specification.

1|Updated Aug 18, 2026
Search Tags:#visual consistency#web design#svg#icon generator#icon set#currentcolor#style preset
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill icon-set-generator-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-set-generator
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/icon-set-generator
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill icon-set-generator-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Custom icon sets give a project a distinct visual identity, but drawing many icons individually causes style drift — inconsistent stroke widths, corner treatments, and visual weight. This Skill enforces a single style specification across every icon so the whole set looks cohesive. ## Core Features & Use Cases - Style Preset System: Choose from five presets (Clean, Sharp, Soft, Minimal, Bold) defining grid, stroke width, caps, joins, corner radius, and padding, then customize per project. - Industry Icon Suggestions: Get tailored icon recommendations for trades, healthcare, hospitality, e-commerce, real estate, SaaS, and more, organized by navigation, communication, trust, and action groups. - Strict SVG Rules: Every icon uses currentColor, identical viewBox and stroke attributes, half-pixel coordinate precision, and optical corrections for visual balance. - Use Case: A user building a website for a plumbing business asks for icons; the Skill suggests 18-25 relevant icons, applies the Clean preset, and delivers individual SVG files plus a preview.html page and style-spec.json. ## Quick Start Generate a consistent set of SVG icons for my plumbing business website using a clean modern style.

Frequently Asked Questions about icon-set-generator

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

FAQPage Schema
How do I create a consistent custom SVG icon set for a website?▼

Define a style specification once — grid size, stroke width, line caps, joins, corner radius, and padding — then apply it to every icon. This Skill provides five presets (Clean, Sharp, Soft, Minimal, Bold) and enforces the rules across the whole set.

What icons should a small business website include?▼

Most sites need universal icons like menu, close, chevron-down, arrow-right, phone, email, location-pin, and clock, plus 6-10 industry-specific icons. The references include suggestions for trades, healthcare, hospitality, retail, real estate, SaaS, and more.

Why use custom SVG icons instead of Lucide or Heroicons?▼

Generic icon libraries make many sites look similar, while a custom set gives a project distinct visual identity. Custom sets also let you tune stroke weight, corner radius, and style to match a specific brand.

How do SVG icons inherit color from CSS?▼

Use stroke="currentColor" and fill="currentColor" instead of hardcoded hex values. The SVG then inherits the CSS color property of its parent element, so one icon file works on light and dark backgrounds.

Why do curved SVG icons look thinner than straight ones?▼

Curves appear thinner than straight lines at the same stroke width due to optical perception. Compensate by making primarily curved icons slightly larger within the grid rather than changing the stroke width, keeping the set visually balanced.

Related Skills

Explore More Design & Creative Skills→
way-platformway-platform
3

way-brand-identity

Enforce Way brand guidelines for tone, typography, and color palettes.

Official
Basic
dylantarredylantarre
38

icon-system

Standardize icon delivery with SVG sprites and inline components.

Community
Basic
JhabbigJhabbig

visual-design-foundations

Establish visual design systems from typography, color, spacing, and iconography standards.

Community
Intermediate
douincdouinc
1

figma-icons-iconify

Fetch SVG icons from Iconify and insert them into Figma designs.

Official
Intermediate