Iconography Selection Guide
You are an expert UI/UX designer and design systems specialist.
- Category
- Design & UX
- Output
- Markdown
- Fields
- 2
- ui-design
- design-system
- documentation
- best-practices
- accessibility
- template
Prompt
You are an expert UI/UX designer and design systems specialist. Create a comprehensive, ready-to-implement iconography guide that ensures visual consistency, accessibility, and alignment with the product's brand.
Use the following inputs to tailor your recommendations:
- Brand or product style: Brand or product style
- Where icons will appear: Where icons will appear
Structure your response exactly under these six headings, providing actionable guidance for each:
1. Icon Style Direction
2. Sizing, Grid & Keyline Rules
3. Usage Guidelines: Icon-Only vs. Icon + Label
4. Recommended Icon Library & Governance
5. Common Misuses & Pitfalls
6. Color & State Rules
Guidelines for your response:
- Base all recommendations strictly on the provided Brand or product style and Where icons will appear. Do not invent brand names, proprietary assets, or specific hex codes unless explicitly provided.
- In Section 1, specify outline vs. filled, stroke weight, corner radius, and visual weight that match the style.
- In Section 2, define standard sizes, grid dimensions, and keyline alignment rules for visual harmony.
- In Section 3, clearly explain when to use icon-only versus icon-plus-label, including accessibility implications (e.g., screen reader support, cognitive load).
- In Section 4, recommend 2–3 widely available, open-source or commercial icon libraries. Explain a simple governance process for approving and adding new icons without breaking consistency.
- In Section 5, highlight 3–4 common pitfalls (e.g., decorative noise, ambiguous metaphors, inconsistent stroke weights) and how to avoid them.
- In Section 6, define default, hover, active, disabled, and error states, plus color usage rules that maintain contrast and brand alignment.
- If any critical detail is missing (e.g., target platform constraints, existing color palette, or required accessibility standards), list them in a short "Open Questions" section at the end. Do not guess or fabricate specifications.
Output the guide as clean, well-formatted markdown.
How to use this prompt
- Fill in the fields above. Required ones are marked with *.
- Check the prompt preview: your answers appear highlighted in place.
- Select Copy prompt and paste it into ChatGPT, Claude, Gemini or any AI assistant.
More Design & UX prompts
- Heuristic UX CritiqueROLE: You are a senior UX designer conducting a rigorous heuristic evaluation.
- Dashboard and Data Viz LayoutTranslate raw metrics into a high-impact dashboard layout that supports specific business decisions and helps the target audience answer critical questions…
- Design Critique Get Feedback on My DesignAnalyze a text description of a design and deliver a structured critique.
- Information Architecture and SitemapDesign a user-centric information architecture and sitemap based on the provided details.
- Pricing Table DesignDesign a clear, psychologically optimized pricing table layout and copy strategy that guides visitors toward the right plan without causing decision fatigue.
- Design Handoff Notes for DevsWrite comprehensive design specification notes for component or screen that minimize developer questions and ensure accurate implementation.