Skills
.Work. You
Rest

icon-design

Community

Craft scalable SVG icons with precision.

Design & Creative#accessibility#animation#svg#ui design#icon design#icon system
AuthorArnavPuri
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses the challenge of creating visually consistent, accessible, and scalable icon systems for digital interfaces.

Core Features & Use Cases

  • SVG Icon Generation: Create custom icons using SVG, ensuring scalability and crisp rendering across all devices.
  • System Consistency: Adhere to grid systems, defined stroke widths, and optical alignment for a unified look.
  • Style Variety: Supports outline, filled, and duotone styles, with options for rounded or sharp aesthetics.
  • Animation: Implement subtle animations like hover effects or draw-on sequences.
  • Accessibility: Ensures icons are usable and understandable for all users.
  • Use Case: Design a complete icon set for a new SaaS product, ensuring all icons (e.g., settings, user profile, notifications) match the brand's visual language and are optimized for web use.

Quick Start

Generate an SVG icon for a 'home' button using the default 24x24 grid and a stroke width of 2px.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: icon-design
Download link: https://github.com/ArnavPuri/designskills/archive/main.zip#icon-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.