skills.rest
OpenLabor
OpenLaborOFFICIAL
Explore all skills by this author →
Website𝕏@openlaboraiGitHub

Icon Design

Design consistent icon sets with SVG and PNG exports.

4|Updated Mar 6, 2026
Search Tags:#design#branding#png#svg#icon#grid
One-click install
npx skills add https://github.com/OpenLabor/openlabor --skill icon-design-openlabor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Icon Design
Source: https://github.com/OpenLabor/openlabor/tree/main/skills_archive/icon-design
Command: npx skills add https://github.com/OpenLabor/openlabor --skill icon-design-openlabor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design icon sets for products and brands is time-consuming and prone to inconsistency; this skill provides a structured approach to create a cohesive icon family.

Core Features & Use Cases

  • Consistent grid and stroke weight: ensure icons share proportions across platforms.
  • Multiple formats: export SVG and PNG for flexible usage.
  • Outline and filled variants: support different UI states and branding.
  • Use Case: In a design system, generate an icon family for a new feature and export assets for web and mobile.

Quick Start

Begin by outlining a brand-aligned icon set in SVG and export PNG variants for common UI sizes.

Frequently Asked Questions about Icon Design

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

FAQPage Schema
How do I design cohesive icon sets that stay consistent across different UI sizes?▼

To design cohesive icon sets, apply a consistent grid and uniform stroke weight so icons share proportions across platforms. This structured approach ensures icons remain recognizable and scalable across different UI sizes.

What is the best way to export SVG and PNG formats for a design system?▼

The best way to export SVG and PNG formats for a design system is to outline brand-aligned icons in SVG and export PNG variants for common UI sizes. This provides flexible usage assets for web and mobile platforms.

Can I generate both outline and filled icon variants for different UI states?▼

Yes, you can generate both outline and filled icon variants to support different UI states and branding requirements. This allows product interfaces to maintain a cohesive icon family while handling active or inactive states.

Do I need a specific grid setup to create scalable icons for product interfaces?▼

You need a consistent grid setup to create scalable icons for product interfaces. A structured grid ensures icons maintain correct proportions and recognizable shapes when rendered across marketing materials and design systems.

How do I create a brand-aligned icon family for a new product feature?▼

To create a brand-aligned icon family for a new product feature, outline the icons in SVG using a consistent grid and stroke weight. Then export PNG variants for common UI sizes to integrate into your design system.

Related Skills

Explore More Design & Creative Skills→
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate
Cuki2910Cuki2910
1

_svg-drawing

Convert SVG source code into PNG images for visual feedback.

Community
Basic
aiyuekuangaiyuekuang
14

ui-design

Create cohesive visual interfaces with color, typography, iconography, and layout.

Community
Intermediate
dfpalhanodfpalhano

design-assets

Generates app icons, favicons, color palettes and manipulates images via ImageMagick/sips.

Community
Intermediate