skills.rest
ScarletFish
ScarletFishCOMMUNITY
Explore all skills by this author →
GitHub

icon-design

Generate SVG and PNG icons with React or Vue component code.

Updated Jun 8, 2026
Search Tags:#design#branding#ui#generation#svg#icon
One-click install
npx skills add https://github.com/ScarletFish/MyAnimeDock --skill icon-design-scarletfish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-design
Source: https://github.com/ScarletFish/MyAnimeDock/tree/main/.agents/skills/icon-design
Command: npx skills add https://github.com/ScarletFish/MyAnimeDock --skill icon-design-scarletfish

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires cairosvg, pillow, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the challenge of creating consistent, high-quality, and brand-aligned icons for digital products without requiring manual design expertise or complex software.

Core Features & Use Cases

  • Multi-Format Generation: Create individual icons, complete icon sets, and App launch icons in SVG and PNG formats.
  • Style Intelligence: Scan existing website URLs or screenshots to extract design styles and generate new icons that match your current UI.
  • Developer Ready: Optionally generate React or Vue component code for seamless integration into your frontend projects.
  • Use Case: Quickly generate a consistent set of 8 navigation icons for a new SaaS dashboard that matches the existing brand color palette and line-weight style.

Quick Start

Use the icon-design skill to generate a set of 5 icons for a finance app using the modern minimalist style and the tech blue color scheme.

Frequently Asked Questions about icon-design

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

FAQPage Schema
How do I generate a consistent set of UI icons for my web application?▼

You can generate UI icons by specifying a style like modern minimalist and a color scheme. The tool produces style-consistent icon sets in SVG and PNG formats, ensuring visual coherence across your digital interfaces without manual design work.

Can I extract design styles from existing website screenshots to match new icons?▼

Yes, the tool scans existing website URLs or screenshots to extract design styles. It then generates new icons that match your current UI's color palette and line-weight style automatically.

Does the generated icon output include React or Vue component code?▼

Yes, the tool optionally generates React or Vue component code alongside SVG and PNG assets. This ensures seamless integration of the generated icons directly into your frontend framework projects.

What is the best way to create App launch icons in SVG and PNG formats?▼

The best way to create App launch icons is using AI-driven prompt engineering to generate professional-grade assets. This approach handles diverse design requirements and outputs the required SVG and PNG file formats directly.

Do I need design expertise to create brand-aligned icon sets for a SaaS dashboard?▼

No, you do not need manual design expertise or complex software to create brand-aligned icon sets. The tool uses AI-driven visual analysis to produce high-quality, consistent icons for digital products automatically.

Related Skills

Explore More Design & Creative Skills→
louai-420louai-420
1

ui-ux-pro-max

Generate UI/UX design systems for dashboards, landing pages, and mobile screens.

Community
Intermediate
no-problem-devno-problem-dev

store-icon

Convert SVG icon designs into Apple HIG-compliant 1024x1024 PNG icons.

Official
Intermediate
ThomashighbaughThomashighbaugh
1

icon-generator

Generate favicon, PWA, and Unreal Engine icon sets from a single PNG or SVG source.

Community
Intermediate
ihlamuryihlamury
73

mercury-ui-skills

Enforce Mercury's light-mode UI design system with Inter font and 4px grid.

Community
Intermediate