UI & interface design

UI Icon Set Design & Specifications Generator

A comprehensive prompt template for creating cohesive, scalable, and production-ready icon sets with complete design specifications. Perfect for UI designers, design system architects, and product teams building consistent visual languages for digital products.

5 blanks to fill in · Added December 2025 · icon-design · iconography · icon-system · visual-design · ui-assets

The prompt

5 blanks

You are an expert icon designer specializing in creating cohesive, scalable, and functional icon sets that enhance user interfaces while maintaining brand consistency and visual clarity.

Create a comprehensive icon set for [PROJECT/PRODUCT NAME] that will be used across [PLATFORM: web application, mobile app, desktop software, design system]. The icon set should serve [TARGET AUDIENCE] and support [PRIMARY USE CASES].

## Project Context:

**Icon Set Overview:**
- Icon category/theme: [e.g., navigation, actions, file types, social media, e-commerce]
- Total number of icons needed: [NUMBER or specify core set vs. extended set]
- Brand personality: [minimalist, playful, professional, technical, organic]
- Visual style preference: [outlined/line, filled/solid, duo-tone, illustrated, glyph]

**Platform Requirements:**
- Primary platform: [iOS, Android, Web, Cross-platform]
- Display contexts: [toolbar, navigation, buttons, inline with text, standalone]
- Size requirements: [16px, 24px, 32px, 48px, or specify range]
- Color implementation: [monochrome, single color with CSS override, multi-color, adaptive]

## Icon Design Specifications:

**Foundation Grid System:**
- Canvas size: [24x24px, 32x32px standard]
- Live area: [20x20px within 24px canvas with 2px padding]
- Grid structure: [2px, 4px, or 8px grid]
- Keyline shapes: [circle, square, vertical rectangle, horizontal rectangle guidelines]
- Optical alignment: Ensure visual weight balance over mathematical precision
- Safe area padding: [2px minimum from canvas edge]

**Visual Design Rules:**
- Style: [Outlined with 2px stroke, Filled solid shapes, Duo-tone with 2 colors, Hybrid outline with selective fills]
- Stroke weight: [1.5px, 2px, or variable with min/max range]
- Corner radius: [0px sharp, 1px slight, 2px rounded, or specify]
- Stroke caps: [round, square, or butt]
- Stroke joins: [round, miter, or bevel]
- Level of detail: [Minimal/symbolic, Moderate, Detailed/illustrative]
- Angles: [45°, 90° preferred; avoid arbitrary angles unless necessary]

**Visual Consistency Principles:**
- Maintain uniform stroke weight across entire set
- Apply consistent corner radii to all rounded elements
- Use standardized geometric shapes (circles, squares, triangles) as building blocks
- Ensure similar visual weight—icons should appear balanced when viewed together
- Apply consistent spacing between internal elements (gaps, overlaps)
- Maintain proportion consistency—similar icons should be similar sizes within canvas

**Color Specifications:**
- Default color: [HEX code or "inherit from parent" for CSS]
- Color application method: [Single color, CSS variable override, Hard-coded multi-color]
- Contrast requirements: [Minimum 3:1 against background for WCAG AA compliance]
- Color states: [Default, Hover, Active, Disabled, Selected]
- Opacity for disabled state: [40%, 50%, or specify]
- Dark mode adaptation: [Automatic inversion, Separate icon versions, Color variable swap]

**Scalability & Export:**
- Base design size: [24px or 32px recommended]
- Export sizes: [16px, 20px, 24px, 32px, 48px, 64px]
- Format: [SVG with outlined strokes, PNG at multiple resolutions, Icon font]
- Pixel-snapping: [Align to pixel grid at smallest size for crisp rendering]
- SVG optimization: [Remove unnecessary attributes, use viewBox, flatten transforms]
- Naming convention: [ic_[category]_[name]_[size], icon-name-size, or custom format]

## Icon Set Categories:

Organize icons into logical categories:

**Core Navigation Icons:** [Minimum 8-12 icons]
- Home, Menu/Hamburger, Back/Forward, Close/X, Search, Settings, Profile/User, Notifications

**Action Icons:** [Minimum 15-20 icons]
- Add/Plus, Delete/Trash, Edit/Pencil, Save/Floppy, Upload/Download, Share, Copy, Cut, Paste, Refresh/Sync, Filter, Sort, Print, Star/Favorite, Like/Heart

**Directional Icons:** [Minimum 8 icons]
- Arrow up/down/left/right, Chevron variations, Expand/Collapse, Dropdown/Caret

**Status & Feedback Icons:** [Minimum 6 icons]
- Success/Checkmark, Error/Warning, Info, Help/Question, Loading/Spinner

**Communication Icons:** [Based on needs]
- Email, Phone, Message/Chat, Video call, Calendar, Document, Attachment

**[CUSTOM CATEGORY based on your project]:** [Specify count]
- [List specific icons needed]

## Deliverables:

1. **Complete Icon Set:**
   - All icons designed at base size on consistent grid
   - Organized by category in [Figma/Sketch/Illustrator] file
   - Master components with variants for different states
   - Visual catalog/sheet showing all icons at-a-glance

2. **Icon Design Specifications Document:**
   - Grid system and construction guidelines
   - Stroke, corner, and shape specifications
   - Color palette and application rules
   - Spacing and sizing standards
   - Do's and don'ts with visual examples
   - Optical adjustment guidelines for special cases

3. **Export Package:**
   - SVG files (optimized, outlined strokes)
   - PNG exports at required resolutions (@1x, @2x, @3x for mobile)
   - Icon font file (if applicable)
   - Organized folder structure by category and size
   - Naming convention documentation

4. **Implementation Guide:**
   - Code snippets for [React, Vue, Angular, HTML/CSS]
   - CSS classes or component usage examples
   - Accessibility implementation (ARIA labels, role attributes)
   - Guidelines for using icons with text (vertical alignment, sizing)
   - Dark mode implementation instructions

5. **Design Source Files:**
   - Editable master file with all icons
   - Component library for easy updates
   - Grid templates for creating new icons
   - Extension guidelines for future icon additions

## Quality Standards:

Ensure all icons meet these criteria:
- **Clarity:** Instantly recognizable at 24px size without labels
- **Consistency:** Uniform visual style, weight, and construction principles
- **Scalability:** Clean rendering from 16px to 64px without loss of clarity
- **Accessibility:** Minimum 3:1 contrast ratio, works with screen readers when labeled
- **Brand alignment:** Reflects [BRAND PERSONALITY] while remaining functional
- **Cross-platform compatibility:** Renders correctly on all target platforms
- **Future-proof:** Following grid system allows consistent expansion of icon set

Provide icons that use universal visual metaphors where possible, avoid cultural ambiguity, maintain 2px minimum spacing between distinct elements within icons, and ensure selected/active states are clearly distinguishable from default states.

Open in ChatGPT

Blanks: Project/product name · Platform · Target audience · Primary use cases · Brand personality

How to use it

Use this prompt to generate a complete, production-ready icon set with comprehensive design specifications and implementation guidelines. Replace bracketed placeholders with your specific project requirements including platform, visual style preferences, icon count, and categories needed. The output will provide a cohesive icon system with technical specifications ready for design execution and developer handoff. For best results, provide reference examples or mood boards that demonstrate your preferred visual style and complexity level.

Tips

Design icons at actual usage size (typically 24px) rather than scaling down from larger artboards. Details that look crisp at 128px often become muddy at 24px, so designing small forces you to simplify appropriately.
Test icons in context by placing them in actual UI mockups alongside text, buttons, and other interface elements. Icons that look perfect in isolation may have alignment issues, appear too heavy or light, or clash with surrounding elements.
Create a consistent language for similar actions across icon variations. For example, if you add a plus sign to indicate 'add', use that plus consistently rather than mixing plus, arrows, and other addition metaphors.
Use stroke-based designs for scalability and consistency rather than complex filled shapes with multiple paths. Strokes scale more predictably and are easier to maintain as a cohesive set as it grows.
Build flexibility into your system by designing icons as components with interchangeable parts. A base circle with different interior symbols lets you create badge variations without designing each from scratch.
Test icons with both light and dark backgrounds to ensure they work in all interface contexts. An icon that looks perfect on white may disappear or create visual artifacts on dark backgrounds, especially with subtle shadows or effects.

Pre-Design Planning

Before creating icons, conduct an audit of your interface to identify all icon needs across different contexts—navigation, toolbars, inline with text, empty states, and status indicators. Catalog existing icons if consolidating from multiple sources, noting inconsistencies to address. Define your icon categories based on functional grouping rather than visual similarity—actions, navigation, objects, and statuses work better than grouping by shape. Research platform conventions for your target environment: iOS favors 28x28pt outlined icons with SF Symbols as reference, Android uses 24dp Material Icons, and web applications typically use 16px, 20px, or 24px icons. Determine whether you need a single style or multiple styles for different contexts, such as outlined for default states and filled for selected states. Establish your technical constraints early—will icons be single-color SVGs styled with CSS, multi-color illustrations, or icon fonts—as this affects design approach significantly.

Grid System Fundamentals

A robust grid system ensures visual consistency and simplifies icon creation. Start with a 24x24px canvas with a 2px padding buffer, leaving a 20x20px live area for actual icon content. Use a 2px baseline grid with keyline shapes as guides: a centered circle at 20px diameter, a centered square at 18x18px, vertical rectangle at 16x20px, and horizontal rectangle at 20x16px. These keylines help maintain consistent visual weight—circular icons align to the circle keyline, square icons to the square keyline, and so on. When designing, prioritize optical balance over mathematical precision: a triangle may need to extend slightly beyond its keyline to appear the same visual weight as a square. Test icons at actual size frequently—what looks good at 200% zoom may fail at 24px. For multi-size exports, design at your base size first, then optically adjust at smaller sizes rather than mechanically scaling, as some details may need simplification at 16px.

Consistency Techniques

Visual consistency distinguishes professional icon sets from amateur collections. Apply uniform stroke weight throughout—if one icon uses 2px strokes, all icons must use 2px strokes. Maintain consistent corner radii by defining rounded, slightly rounded, or sharp corners and applying the rule uniformly. Use consistent angles preferring 45° and 90° angles, avoiding arbitrary rotations that make icons feel unrelated. Ensure similar icons have similar proportions—if a document icon fills 80% of the live area, other object icons should target similar coverage. Create a master icon first as your template, then design variations maintaining its fundamental properties. Build icons from a shared geometric vocabulary using consistent circles, rectangles, and triangles rather than freestyle shapes. Test consistency by viewing all icons together at actual size in grayscale—visual weight differences become immediately apparent when color is removed. When exceptions are necessary for recognition or clarity, document them explicitly as intentional deviations with rationale.

Implementation Strategy

Successful icon implementation requires planning beyond visual design. Choose the right format: inline SVG offers maximum flexibility with CSS styling and animation but increases HTML size; external SVG files can be cached and sprite sheets reduce HTTP requests; icon fonts provide easy styling but have accessibility challenges and rendering inconsistencies; PNG remains necessary for legacy support or performance-critical scenarios. For web applications, implement icons as React/Vue components with built-in accessibility props, size variants, and color customization. Export SVGs with cleaned paths—remove unnecessary groups, flatten transforms, use viewBox instead of width/height attributes, and outline strokes to prevent rendering inconsistencies. Establish a naming convention that includes category and descriptive name like ic-action-delete or icon-nav-home for clarity in large icon sets. Create comprehensive documentation with visual examples, code snippets, accessibility guidelines, and contribution processes for team members adding new icons. Set up automated testing to verify icon file size limits, valid SVG syntax, and consistent viewBox dimensions across the set.