HomeCasa Icon style guide for a design system
Create a style guide for your icon set: grid and keylines, stroke weight, corners, sizes, a metaphor for each icon, naming, SVG export rules, accessibility and a review checklist. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 5 customizable variables and you can copy it for free in one click.
Intermediate · Text · Pending editorial review
Prompt
Act as an icon designer and design system lead.
Context:
- Product: {{product}}
- Brand personality: {{personality}}
- Icon style: {{style}}
- Base grid size: {{grid}}
- Icons we need: {{icons}}
Deliverables:
1. 3-5 style principles derived from the brand personality, with examples of how they apply.
2. Grid and keylines: canvas size, live area, padding and keyline shapes (circle, square, portrait and landscape rectangles) with measurements.
3. Construction rules: stroke weight, corner radius, terminals, allowed angles, handling of gaps and minimum detail.
4. Usage sizes (for example 16, 20, 24, 32) and when an optically adjusted version is needed.
5. A metaphor table for each requested icon: proposed metaphor, alternative, ambiguity or cultural risk and whether it should always be paired with a text label.
6. File and component naming, plus SVG export rules: viewBox, no hard-coded fills (currentColor), outlined strokes or not depending on the case, and optimization.
7. Accessibility: decorative versus informative icons, aria-hidden, accessible names for icon-only buttons, minimum 3:1 contrast and a 44-48 px touch target regardless of icon size.
8. A review checklist before adding any new icon to the set.
Constraints:
- Do not copy or imitate third-party icon sets; if you suggest starting from an open-source library, remind me to check its license.
- Use [FILL IN] for brand decisions not covered by the context.
- If the icon list is ambiguous, ask me what action each icon represents before proposing metaphors.
Format: a guide with headings, tables for measurements and metaphors, and a final checklist.How to use it
- List the icons you need with the action or concept each one represents. 2. Review the metaphor table with users or your product team. 3. Build a grid template in your design tool with the proposed measurements.
Usage example
Product: banking app · Personality: trustworthy and warm · Style: outline with filled active state · Grid: 24px · Icons: transfer, card, alerts, savings.
Sample output
Style principles
- Trustworthy: stable geometric shapes, no unnecessary slanted strokes.
- Warm: 2px rounded corners and round terminals.
- Simple: three elements per icon at most; if it needs more, the metaphor isn't working.
Grid and construction (24px)
| Element | Measurement |
|---|---|
| Canvas | 24 × 24 px |
| Live area | 20 × 20 px (2px padding) |
| Circle keyline | Ø 20 px |
| Square keyline | 18 × 18 px |
| Stroke | 1.5px, round caps |
| Corner radius | 2px |
| Active state | Same drawing with a solid fill |
Metaphor table
| Icon | Metaphor | Alternative | Risk | Always labeled? |
|---|---|---|---|---|
| Home | House | Grid | Low | Yes, in the tab bar |
| Transfer | Two opposing arrows | Arrow to a person | Can read as "swap" | Yes |
| Mobile payments | Phone with waves | Hand holding phone | Waves = Wi-Fi | Yes |
| Savings | Piggy bank | Coin with up arrow | Piggy bank isn't universal | Yes |
| Alerts | Bell | — | Low | Icon-only button: accessible name |
SVG export
viewBox="0 0 24 24", no hard-coded fills:stroke="currentColor".- File names:
icon-transfer-outline.svg/icon-transfer-filled.svg…
Key facts
- Category
- UI/UX design · Design systems
- Output type
- Text
- Level
- Intermediate
- Designed for
- ChatGPT, Claude, Gemini and Microsoft Copilot
- Verified in
- Pending editorial verification
- Variables
- Product, Brand personality, Icon style, Base grid and Icons needed
- Language
- English
- Price
- Free, no sign-up
- Updated
- Nov 7, 2026
Frequently asked questions
What grid size works best for UI icons?
A 24 px grid is the most common for interfaces, with 16 or 20 px versions for dense spaces. What matters is keeping the same apparent stroke weight across sizes.
Do icons always need a text label?
Not always, but less universal icons should be paired with a label. Icon-only buttons need, at minimum, an accessible name for screen readers.
What is this prompt for?
Create a style guide for your icon set: grid and keylines, stroke weight, corners, sizes, a metaphor for each icon, naming, SVG export rules, accessibility and a review checklist.
Which AI tools does it work with?
It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.
How do I customize the prompt?
Click “Customize” and fill in the variables (Product, Brand personality, Icon style, Base grid and Icons needed). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.
Do I need experience to use it?
It is intermediate: it helps to know the topic so you can provide good context and review the result critically.
Is this prompt free?
Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.
Can I trust the AI output?
Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.