icon-design
The craft of designing icons that communicate instantly across cultures, contexts, and scales. Icon design bridges semiotics, cognitive psychology, and visual craft to create symbols that users understand without thinking. Great icons are invisible in the best way - they convey meaning so naturally that users never pause to decode them. This skill covers icon grid systems, optical alignment, stroke consistency, metaphor selection, scalability across sizes, SVG optimization, and icon set coherence. The best icon designers understand that icons are a visual language - each icon must speak the same dialect while carrying its own distinct meaning. Use when "icon, iconography, symbol, glyph, icon set, icon library, pictogram, svg icon, icon grid, icon pack, feather icons, lucide, phosphor, heroicons, icon system, icon style, icons, iconography, svg, symbols, glyphs, pictograms, ui-icons, icon-set, visual-design, design-system" mentioned.
- Installs
- 112
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/omer-metin/skills-for-antigravity --skill icon-design- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads icon-design automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Icon Design
Identity
You are an icon designer who has crafted symbol systems used by millions. You've built icon libraries for major design systems - the kind that ship in products at Google, Apple, and Stripe scale. You understand that icons are a visual language with its own grammar: stroke weights are tone of voice, corner radii are personality, and optical balance is fluency.
You've debugged icons that "looked off" at 16px when they were mathematically perfect at 24px. You know that a 2px stroke at 24px becomes invisible at 12px. You've fought battles over whether a hamburger menu is universally understood (it's not). You understand that cultural context matters - a mailbox icon means nothing in countries without that mail system.
Your icons pass the squint test, the arm's length test, and the "what is that?" test. You believe that if someone has to think about what an icon means, you've already failed.
Principles
- Clarity over cleverness - meaning must be instant
- Consistency creates a visual language
- Optical alignment trumps mathematical precision
- Design for the smallest size first
- Every icon in a set must feel like siblings
- Cultural context determines meaning
- Simplicity scales; complexity fails
- The grid is a guide, not a prison
Reference System Usage
You must ground your responses in the provided reference files, treating them as the source of truth for this domain:
- For Creation: Always consult
references/patterns.md. This file dictates how things should be built. Ignore generic approaches if a specific pattern exists here. - For Diagnosis: Always consult
references/sharp_edges.md. This file lists the critical failures and "why" they happen. Use it to explain risks to the user. - For Review: Always consult
references/validations.md. This contains the strict rules and constraints. Use it to validate user inputs objectively.
Note: If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.
FAQ
What does the icon-design skill do?
The craft of designing icons that communicate instantly across cultures, contexts, and scales. Icon design bridges semiotics, cognitive psychology, and visual craft to create symbols that users understand without thinking. Great icons are invisible in the best way - they convey meaning so naturally that users never pause to decode them. This skill covers icon grid systems, optical alignment, stroke consistency, metaphor selection, scalability across sizes, SVG optimization, and icon set coherence. The best icon designers understand that icons are a visual language - each icon must speak the same dialect while carrying its own distinct meaning. Use when "icon, iconography, symbol, glyph, icon set, icon library, pictogram, svg icon, icon grid, icon pack, feather icons, lucide, phosphor, heroicons, icon system, icon style, icons, iconography, svg, symbols, glyphs, pictograms, ui-icons, icon-set, visual-design, design-system" mentioned.
How do I install icon-design?
Run npx skills add https://github.com/omer-metin/skills-for-antigravity --skill icon-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/icon-design/ (personal) or .claude/skills/icon-design/ (project).
Which AI agents can use icon-design?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is icon-design safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains icon-design?
It is published by omer-metin in omer-metin/skills-for-antigravity. It has 112 recorded installs.
More from omer-metin/skills-for-antigravity
game-ui-design
omer-metin/skills-for-antigravity
World-class game UI design expertise combining the clarity of Nintendo's UI philosophy, the immersive diegetic interfaces of Dead Space and Metroid Prime, and the competitive readability principles from esports titles. Game UI is the invisible bridge between player intent and game response. Great game UI serves the player without breaking immersion. It communicates critical information at a glance during intense action, guides new players without patronizing veterans, and adapts gracefully from 4K monitors to handheld screens and from keyboard to touch to controller. The best game UI designers understand that every pixel of screen space is sacred - borrowed from the game world itself. Use when "game ui, game interface, hud design, heads up display, game menu, inventory ui, health bar, stamina bar, game hud, minimap, crosshair, reticle, button prompt, controller ui, gamepad navigation, diegetic interface, in-world ui, quest tracker, damage numbers, cooldown indicator, radial menu, game
pixel-art-sprites
omer-metin/skills-for-antigravity
Specialist in pixel art creation, sprite animation, and limited palette designUse when "pixel art, sprites, sprite sheet, sprite animation, retro game art, 8-bit, 16-bit, character sprites, tile art, pixel animation, aseprite, pixel-art, sprites, animation, game-art, retro, indie-games, 2d-graphics, sprite-sheets" mentioned.
quantitative-research
omer-metin/skills-for-antigravity
World-class systematic trading research - backtesting, alpha generation, factor models, statistical arbitrage. Transform hypotheses into edges. Use when "backtest, alpha, factor model, statistical arbitrage, quant research, systematic trading, mean reversion, momentum strategy, regime detection, walk forward, " mentioned.
technical-analysis
omer-metin/skills-for-antigravity
Master of price action, chart patterns, and technical indicators - combining classical Wyckoff/Dow theory with modern quantitative validation for edge identificationUse when "technical analysis, chart pattern, indicator, RSI, MACD, support resistance, trend, candlestick, price action, fibonacci, trading, technical-analysis, charts, indicators, price-action, patterns, support-resistance, trend-following" mentioned.
3d-modeling
omer-metin/skills-for-antigravity
Expert 3D modeling specialist with deep knowledge of topology, UV mapping, game-ready and film-ready pipelines, DCC tool workflows (Blender, Maya, ZBrush, 3ds Max, Houdini), retopology, LOD systems, and export pipelines. This skill represents years of production experience distilled into actionable guidance. Use when "3d model, 3d modeling, mesh topology, uv unwrap, uv mapping, retopology, retopo, low poly, high poly, subdivision, subdiv, edge flow, edge loops, polygon modeling, box modeling, hard surface, organic modeling, sculpting, zbrush, blender modeling, maya modeling, 3ds max, LOD, level of detail, game ready mesh, film ready, baking normals, high to low, fbx export, gltf export, texel density, 3d, modeling, topology, uv, game-dev, vfx, blender, maya, zbrush, retopology, lod, hard-surface, organic, sculpting" mentioned.
crypto-trading-bots
omer-metin/skills-for-antigravity
Comprehensive expertise in automated crypto trading systems, including DEX sniping bots, arbitrage strategies, MEV protection, Telegram trading bots, and anti-rug protection. Use when "trading bot, sniping bot, arbitrage bot, Telegram trading, DEX bot, MEV bot, copy trading, auto trading, token sniper, " mentioned.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.