Icon Set Generator

Icon Set Generator

Generate custom, visually consistent SVG icon sets tailored to specific projects. Each set is built from a shared style specification so every icon looks like it belongs with the others — same stroke weight, same corner treatment, same visual density.

Why This Matters

Generic icon libraries (Lucide, Heroicons) are great but every site using them looks similar. A custom icon set gives a project distinct visual identity. The hard part is consistency — drawing 20+ icons individually causes style drift. This skill solves that by defining style rules once and enforcing them across every icon.

Workflow

Step 1: Understand the Project

Ask about the project. You need enough to suggest icons and pick a style:

• What's the business/project? (industry, name, vibe)
• Any brand guidelines or colour palette? (informs style choices even though SVGs use currentColor)
• What feel? (modern, friendly, corporate, minimal, bold)
• Roughly how many icons? (typical small site: 15-25)

A brief like "plumber in Newcastle, modern feel" is enough to proceed. Don't over-interview.

Step 2: Suggest Icons

Read references/industry-icons.md for industry-specific suggestions. Organise into groups:

• Navigation — menu, close, arrows, search
• Communication — phone, email, location, clock
• Trust — star, shield, award, users
• Actions — download, share, calendar, form
• Industry-Specific — icons unique to this business type

Present the list. Let the user add, remove, or rename before generating.

Step 3: Define the Style Spec

Read references/style-presets.md for full preset definitions. Pick one as starting point:

Tell the user which preset you're recommending and why, then confirm.

Step 4: Generate the Icons

Generate every icon following the SVG Rules below. Output to an icons/ directory in the project root (or the user's preferred location).

Read references/svg-examples.md before generating — it contains reference implementations showing the right level of complexity and how to handle common icon shapes.

Generate in batches of ~5. After each batch, visually review for consistency before continuing. After all icons are done, create the preview page and style-spec.json.

Step 5: Deliver

Output structure:

icons/
├── style-spec.json
├── preview.html
├── home.svg
├── phone.svg
└── ...

Present preview.html first so the user sees the complete set visually.

---

SVG Rules

Every icon in a set MUST follow all of these. Even small inconsistencies — a slightly different stroke width, a rounded corner where others are sharp — make the set look amateur.

SVG Template

Every icon uses this exact outer structure:

<svg xmlns="http://www.w3.org/2000/svg"
  width="{grid}" height="{grid}"
  viewBox="0 0 {grid} {grid}"
  fill="none"
  stroke="currentColor"
  stroke-width="{strokeWidth}"
  stroke-linecap="{strokeLinecap}"
  stroke-linejoin="{strokeLinejoin}">
  <!-- icon paths here -->
</svg>

Hard Rules

1. `currentColor` only — Never hardcode colours. SVGs inherit colour from CSS. No fill="#000" or stroke="blue". If a shape needs fill, use fill="currentColor".

2. Identical viewBox — Every icon uses the same viewBox. No exceptions.

3. Identical root stroke attributes — stroke-width, stroke-linecap, stroke-linejoin on the <svg> element must match across all icons. Override on individual elements only when truly necessary.

4. No transforms on root — No translate, rotate, scale. Bake positioning into coordinates.

5. No IDs or classes — Keep SVGs clean for external styling.

6. Coordinate precision — Max 2 decimal places. Snap to half-pixel grid (e.g. 12, 12.5, not 12.333).

7. Consistent padding — Maintain configured padding from viewBox edge. For 24px grid with 2px padding, draw within 2–22 coordinate range.

8. Minimal elements — Fewest <path>, <circle>, <rect>, <line> elements practical. Simpler = smaller + faster rendering.

9. Visual centring — Appear visually centred, not just mathematically centred. A leftward arrow shifts slightly right. A house with a chimney adjusts for asymmetry.

Optical Corrections

Subtle but essential for professional results:

• Curved stroke compensation: Curves appear thinner than straight lines at same stroke width. For primarily curved icons (phone, globe), make paths slightly larger rather than changing stroke width.
• Pointed shape overshoot: Arrows, chevrons, triangles extend ~0.5px beyond where a square would stop to appear the same size.
• Visual weight balancing: Simple icons (single chevron) look lighter than complex ones (gear). Make simpler icons slightly larger in the grid, or use slightly more substantial paths. No icon should look noticeably lighter or heavier than the others.

---

style-spec.json

{
  "name": "project-name-icons",
  "preset": "clean",
  "grid": 24,
  "strokeWidth": 1.5,
  "strokeLinecap": "round",
  "strokeLinejoin": "round",
  "cornerRadius": 2,
  "padding": 2,
  "opticalBalance": true,
  "iconCount": 20,
  "icons": ["home", "phone", "email"],
  "generated": "2026-02-15"
}

---

Preview Page

Generate a self-contained HTML file displaying all icons for visual review. Read references/preview-template.md for the template. Requirements:

• Grid of all icons at native size (24px) with labels
• Same grid at 2x (48px) for detail inspection
• Dark background section (white on dark) for contrast check
• Style spec summary at top
• Inline CSS, no dependencies — just open in browser
• Inline all SVGs directly into the HTML (don't reference external files)

---

Quality Checklist

Verify every item before delivering:

• [ ] All SVGs have identical viewBox, stroke-width, stroke-linecap, stroke-linejoin
• [ ] All SVGs use currentColor exclusively
• [ ] Visual weight is balanced across the set
• [ ] Padding is consistent (nothing touching viewBox edge)
• [ ] All icons visually centred
• [ ] Filenames are lowercase kebab-case (arrow-right.svg)
• [ ] Preview HTML renders all icons correctly
• [ ] style-spec.json is accurate and lists all icons

---

Reference Files

Read these before generating:

• references/style-presets.md — Detailed preset definitions and selection guidance
• references/industry-icons.md — Industry-specific icon suggestions
• references/preview-template.md — HTML template for the preview page
• references/svg-examples.md — Example SVGs showing proper construction at various complexity levels

Industry Icon Suggestions

When a user describes their project, use this reference to suggest appropriate icons. These are starting points — always adapt to the specific project and ask the user to confirm.

Universal Icons (Include for Almost Every Website)

These icons appear on nearly every business website regardless of industry:

• menu — hamburger/three lines for mobile nav
• close / x — close modals, menus, notifications
• chevron-down — dropdowns, accordions, "read more"
• arrow-right — CTAs, links, "learn more"
• phone — contact section, header
• email / mail — contact section, newsletter
• location-pin / map-pin — address, service area
• clock — business hours, response times
• search — site search (if applicable)
• external-link — links opening in new tab (optional)

Industry-Specific Suggestions

Trades & Home Services

Plumber, electrician, HVAC, builder, landscaper, painter, locksmith, pest control.

Services: wrench, hammer, droplet (water), flame (gas/heating), bolt (electrical), pipe, thermometer, fan (HVAC), paintbrush, leaf (landscaping), shield-check (licensed/insured), hard-hat, tape-measure

Trust: license-badge, insurance-shield, years-experience, thumbs-up, guarantee

Urgency: alert-circle (emergency), clock-fast (24/7), phone-call (call now)

Typical set size: 18-25 icons

Professional Services

Accountant, lawyer, financial advisor, consultant, architect.

Services: briefcase, document, scale (legal), calculator, chart-bar, chart-line, clipboard, pen, handshake, building, gavel (legal), percent (financial)

Trust: award, certificate, shield-check, users (team), graduation-cap

Process: steps/workflow, calendar, checklist, folder

Typical set size: 15-22 icons

Health & Medical

Physio, dentist, GP, chiropractor, optometrist, veterinary, pharmacy.

Services: heart, stethoscope, tooth (dental), eye (optometry), bone (chiro/physio), paw (vet), pill (pharmacy), bandage, clipboard-medical, first-aid

Booking: calendar-check, clock, phone

Accessibility: wheelchair, ear (hearing), brain

Typical set size: 18-24 icons

Hospitality & Food

Restaurant, café, bar, catering, bakery, food truck.

Food/Drink: utensils, wine-glass, coffee, chef-hat, cake (bakery), pizza, plate

Services: reservation/calendar, wifi, parking, truck (delivery), bag (takeaway), receipt

Ambience: music-note, candle, sun/moon (daytime/evening)

Typical set size: 15-22 icons

Retail & E-Commerce

Online store, boutique, general retail.

Shopping: cart, bag, tag/label, credit-card, receipt, barcode, gift

Delivery: truck, package, return-arrow, tracking

Product: ruler/size-guide, colour-swatch, zoom-in, heart (wishlist), compare

Account: user, lock, bell (notifications)

Typical set size: 20-30 icons

Real Estate

Agent, property management, development.

Property: home, building, key, door, window, fence, pool

Features: bed, bath, car (garage), ruler (sqm), tree (outdoor), sun (aspect)

Process: search, map, camera (photos), video (virtual tour), document, pen (sign)

Typical set size: 20-28 icons

Education & Training

School, tutoring, online courses, coaching.

Learning: book, graduation-cap, pencil, lightbulb, brain, puzzle, target

Delivery: video, screen/monitor, headphones, microphone, download

Progress: chart-up, trophy, badge, checklist, certificate

Typical set size: 18-24 icons

Technology & SaaS

Software company, IT services, tech startup.

Product: code, terminal, cloud, server, database, api-bracket, smartphone, laptop

Security: lock, shield, key, fingerprint, eye-off

Collaboration: users, chat, share, git-branch, plug (integration)

Typical set size: 20-30 icons

Creative & Design

Design studio, photographer, videographer, marketing agency.

Creative: camera, video, palette, pen-tool, layers, crop, image

Delivery: download, share, cloud-upload, folder, eye (preview)

Process: lightbulb, target, chart-up, megaphone (marketing)

Typical set size: 15-22 icons

Non-Profit & Community

Charity, community org, church, sports club.

Mission: heart, hands (helping), globe, leaf (environment), people-group

Engagement: calendar (events), megaphone, chat, share, donate/gift

Resources: book, document, link, download

Typical set size: 15-20 icons

Automotive

Mechanic, car dealer, detailing, towing.

Vehicle: car, truck, engine, wrench, oil-drop, tire, gauge, battery

Service: clipboard, calendar, phone, clock, shield-check (warranty)

Typical set size: 18-24 icons

---

Suggesting Icons — Guidelines

1. Start with universals — Every site needs nav and contact icons 2. Add industry specifics — Pick the most relevant 6-10 from the industry list 3. Consider the site structure — What pages will they have? Each page might need its own icon for navigation or feature sections 4. Don't over-suggest — 15-25 is the sweet spot. More than 30 icons and the user is overwhelmed, less than 12 and the set feels incomplete 5. Use clear names — Name icons by what they depict, not their function. "wrench" not "services". "phone" not "contact-us". This makes them reusable across contexts 6. Group logically — Present grouped by category so the user can evaluate coverage area by area

Preview Page Template

Use this template to generate the preview.html file. Replace the placeholder content with actual icons and metadata.

Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{PROJECT_NAME}} — Icon Set Preview</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    color: #1a1a1a;
    background: #fafafa;
  }
  h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.25rem; }
  .subtitle { color: #666; font-size: 0.9rem; margin-bottom: 2rem; }
  .spec {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    font-size: 0.85rem;
    color: #444;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }
  .spec span { white-space: nowrap; }
  .spec strong { color: #1a1a1a; }
  h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
  }
  .icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e5e5;
    transition: border-color 0.15s;
  }
  .icon-card:hover { border-color: #999; }
  .icon-card svg { flex-shrink: 0; }
  .icon-card .label {
    font-size: 0.7rem;
    color: #666;
    text-align: center;
    word-break: break-all;
  }
  .dark-section {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
  }
  .dark-section h2 {
    color: #fff;
    border-bottom-color: #333;
  }
  .dark-section .icon-card {
    background: #2a2a2a;
    border-color: #333;
    color: #fff;
  }
  .dark-section .icon-card:hover { border-color: #555; }
  .dark-section .icon-card .label { color: #999; }
  .size-label {
    font-size: 0.75rem;
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
</style>
</head>
<body>

<h1>{{PROJECT_NAME}} Icons</h1>
<p class="subtitle">{{ICON_COUNT}} icons · {{PRESET}} style · Generated {{DATE}}</p>

<div class="spec">
  <span><strong>Grid:</strong> {{GRID}}px</span>
  <span><strong>Stroke:</strong> {{STROKE_WIDTH}}px</span>
  <span><strong>Caps:</strong> {{STROKE_LINECAP}}</span>
  <span><strong>Joins:</strong> {{STROKE_LINEJOIN}}</span>
  <span><strong>Corner radius:</strong> {{CORNER_RADIUS}}px</span>
  <span><strong>Padding:</strong> {{PADDING}}px</span>
</div>

<h2>Native Size <span class="size-label">({{GRID}}px)</span></h2>
<div class="grid">
  <!-- REPEAT FOR EACH ICON -->
  <div class="icon-card">
    {{SVG_AT_NATIVE_SIZE}}
    <span class="label">{{ICON_NAME}}</span>
  </div>
  <!-- END REPEAT -->
</div>

<h2>2× Size <span class="size-label">({{GRID_2X}}px)</span></h2>
<div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));">
  <!-- REPEAT FOR EACH ICON -->
  <div class="icon-card">
    {{SVG_AT_2X_SIZE}}
    <span class="label">{{ICON_NAME}}</span>
  </div>
  <!-- END REPEAT -->
</div>

<div class="dark-section">
  <h2>Dark Background <span class="size-label">({{GRID_2X}}px)</span></h2>
  <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));">
    <!-- REPEAT FOR EACH ICON -->
    <div class="icon-card">
      {{SVG_AT_2X_SIZE}}
      <span class="label">{{ICON_NAME}}</span>
    </div>
    <!-- END REPEAT -->
  </div>
</div>

</body>
</html>

Implementation Notes

• For "native size" SVGs: render at the grid size (e.g. width="24" height="24")
• For "2x size" SVGs: double the width/height attributes (e.g. width="48" height="48") but keep the same viewBox
• The dark section uses CSS color: #fff on the card, which currentColor in the SVGs will inherit — no SVG changes needed
• Inline every SVG directly in the HTML. Don't use <img> tags or external references
• Replace all {{PLACEHOLDER}} values with actual data from the style spec

Style Presets Reference

Each preset defines a complete set of SVG attributes that ensure visual consistency across an icon set. Pick a preset as a starting point, then adjust individual parameters if the project calls for it.

Preset: Clean

The safe default. Works for most business websites, SaaS dashboards, and professional services.

{
  "grid": 24,
  "strokeWidth": 1.5,
  "strokeLinecap": "round",
  "strokeLinejoin": "round",
  "cornerRadius": 2,
  "padding": 2,
  "opticalBalance": true
}

Character: Balanced, professional, approachable without being casual. The round caps and joins soften the icons without making them feel childish. The 1.5px stroke is the sweet spot — visible without being heavy.

Use when: You don't have strong reasons to choose something else. This is the "can't go wrong" option.

Drawing range: With 24px grid and 2px padding, draw within coordinates 2–22.

---

Preset: Sharp

Corporate, technical, precise. Good for law firms, engineering companies, fintech.

{
  "grid": 24,
  "strokeWidth": 1.5,
  "strokeLinecap": "square",
  "strokeLinejoin": "miter",
  "cornerRadius": 0,
  "padding": 2,
  "opticalBalance": true
}

Character: Authoritative and precise. Square caps create definitive endpoints. Miter joins make clean 90° corners. Zero corner radius means rectangles are sharp.

Use when: The brand identity is formal, technical, or conveys precision and authority.

Watch out for: Miter joins can create spiky artifacts at acute angles. If a path has angles less than ~30°, consider using stroke-linejoin="round" on that specific element only.

---

Preset: Soft

Friendly, warm, approachable. Good for childcare, health & wellness, food, community orgs.

{
  "grid": 24,
  "strokeWidth": 2,
  "strokeLinecap": "round",
  "strokeLinejoin": "round",
  "cornerRadius": 4,
  "padding": 2.5,
  "opticalBalance": true
}

Character: Warm and inviting. The thicker 2px stroke gives more visual presence. Large corner radius makes everything feel rounded and friendly. Extra padding (2.5px) gives breathing room.

Use when: The project needs to feel approachable, non-intimidating, or playful.

Drawing range: With 2.5px padding, draw within coordinates 2.5–21.5.

---

Preset: Minimal

Elegant, restrained, editorial. Good for luxury brands, design studios, photography portfolios.

{
  "grid": 24,
  "strokeWidth": 1,
  "strokeLinecap": "round",
  "strokeLinejoin": "round",
  "cornerRadius": 0,
  "padding": 2,
  "opticalBalance": true
}

Character: Delicate and refined. The 1px stroke is thin — it looks elegant at larger sizes (32px+) but needs careful testing at smaller sizes. Zero corner radius keeps geometry pure.

Use when: The design is high-end, editorial, or minimalist. Works best when icons will be displayed at 28px+ size.

Watch out for: At 16-20px rendering, 1px strokes can look faint on standard-DPI screens. Recommend this preset only when you know the icons will be used at adequate sizes, or when the site targets retina displays.

---

Preset: Bold

High impact, accessible. Good for outdoor brands, construction, emergency services, signage.

{
  "grid": 24,
  "strokeWidth": 2.5,
  "strokeLinecap": "round",
  "strokeLinejoin": "round",
  "cornerRadius": 2,
  "padding": 2.5,
  "opticalBalance": true
}

Character: Strong and unmistakable. The 2.5px stroke is thick enough to read at small sizes and low contrast. Ideal for accessibility-focused projects or brands that want to feel strong and reliable.

Use when: Icons need to be legible in challenging conditions — small sizes, low contrast, outdoor signage, or accessibility requirements.

Drawing range: With 2.5px padding and thick strokes, the usable drawing area is tighter. Keep paths within 3–21 to avoid strokes bleeding into the padding.

---

Customising Presets

You can mix parameters. Common adjustments:

• Clean preset but with square caps: More structured feel while keeping round joins
• Soft preset but with 1.5px stroke: Friendly corners but less heavy
• Minimal preset but with 1.25px stroke: Slightly more visible while staying refined
• Bold preset but with miter joins: Industrial/construction feel

Always document the customisation in the style-spec.json so the user knows exactly what was used.

---

Grid Size Notes

24px is the standard and works for almost everything. Consider alternatives only if:

• 20px: The design system is built on a 20px base unit (uncommon)
• 32px: Icons will primarily display at large sizes (hero sections, feature lists)
• 16px: Icons are exclusively for very small UI elements (rare — usually just use 24px and scale down)

Stick with 24px unless there's a specific reason not to.

SVG Examples Reference

These examples show how to construct icons correctly using the Clean preset (24px grid, 1.5px stroke, round caps/joins, 2px padding). Study the patterns before generating your set.

Key Principles Demonstrated

1. All coordinates stay within the padding zone (2–22 for 24px grid with 2px padding) 2. Coordinates use at most 2 decimal places, preferring whole and half numbers 3. Paths are minimal — no unnecessary points or elements 4. Icons are visually centred, not just mathematically centred

---

Simple Icon: Chevron Right

A basic directional indicator. Note the optical overshoot — the chevron extends slightly beyond what pure math would suggest, so it feels the same visual weight as boxier icons.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="9 6 15 12 9 18"/>
</svg>

Why it works: Single element. Points are clean whole numbers. The chevron occupies 6px horizontally (9→15) and 12px vertically (6→18) — slightly taller than wide, which is correct for a chevron that needs to feel balanced.

---

Simple Icon: Close / X

Two diagonal lines crossing. Symmetrical and centred.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <line x1="6" y1="6" x2="18" y2="18"/>
  <line x1="18" y1="6" x2="6" y2="18"/>
</svg>

Why it works: Perfectly symmetrical. Uses <line> elements because that's the simplest representation. Coordinates are all whole numbers. The X spans 12px in each direction (6→18), leaving 6px of padding on each side — generous, which gives the icon breathing room.

---

Medium Icon: Home

A house shape combining a roof (triangle) and body (rectangle). Demonstrates combining multiple elements.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 10.5L12 3l9 7.5"/>
  <path d="M5 9.5v10a1 1 0 001 1h12a1 1 0 001-1v-10"/>
  <path d="M9.5 20.5v-6h5v6"/>
</svg>

Why it works: Three paths — roof line, house body, door. The roof peak (12, 3) is at the top padding boundary. The house bottom (20.5) leaves room for the baseline. The door is centred horizontally. Corner radius on the house body (a1 1 0 001 1) matches the preset's cornerRadius of 2px (approximated as 1 in the arc for this scale).

---

Medium Icon: Email / Mail

An envelope shape. Shows how to handle a recognisable real-world object.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <rect x="3" y="5" width="18" height="14" rx="2"/>
  <polyline points="3 5 12 13 21 5"/>
</svg>

Why it works: Two elements — rectangle body and V-shaped flap line. The rx="2" on the rect matches the preset's corner radius. The envelope flap's peak (12, 13) is slightly above centre, which matches how real envelopes look. The rect spans the full usable width (3–21) because envelopes are wide.

---

Medium Icon: Phone

A phone handset. Demonstrates curved paths and the curved stroke compensation principle.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.81.36 1.6.68 2.35a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.75.32 1.54.55 2.35.68a2 2 0 011.72 2.03z"/>
</svg>

Why it works: Single path for the complete handset shape. The curves create a recognisable phone silhouette. Because this icon is almost entirely curved, the path is sized slightly more generously within the grid — it extends close to the edges to compensate for the visual thinning effect of curves.

---

Complex Icon: Shield Check

A shield with a checkmark inside. Shows layering meaning (protection + verification).

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 2l7.5 3.5v5c0 5.25-3.19 8.69-7.5 11.5-4.31-2.81-7.5-6.25-7.5-11.5v-5L12 2z"/>
  <polyline points="9 12 11 14 15 10"/>
</svg>

Why it works: Two elements — shield outline and checkmark. The shield is vertically asymmetric (taller below centre than above) which matches how real shields look. The checkmark is positioned slightly above the shield's visual centre. The shield's top point (12, 2) is at the padding boundary, and its bottom (implicit from the curve, ~22) fills the vertical space.

---

Complex Icon: Star

A five-pointed star. Demonstrates precise geometric construction.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26"/>
</svg>

Why it works: Single <polygon> element. The star is calculated from proper geometry (inner/outer radius ratios) so it looks regular. The top point (12, 2) is at the padding boundary. The star is wider than it is tall, which is correct for five-pointed stars. Points use max 2 decimal places.

---

Icon with Fill: Location Pin

Some icons need a filled element alongside stroked elements. Use fill="currentColor" on the specific element, not globally.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/>
  <circle cx="12" cy="9" r="2.5" fill="currentColor"/>
</svg>

Why it works: The pin body is stroked (outline). The inner dot uses fill="currentColor" to appear solid while still respecting the currentColor system. The pin extends from y=2 (top) to an implied y=22 (bottom of the teardrop), using the full vertical space because pins are naturally tall and narrow.

---

What to Avoid

Bad: Hardcoded colours

<!-- WRONG -->
<circle cx="12" cy="12" r="8" stroke="#333" fill="#eee"/>

Bad: Excessive precision

<!-- WRONG -->
<line x1="5.333333" y1="7.142857" x2="18.666667" y2="16.857143"/>
<!-- RIGHT -->
<line x1="5.5" y1="7" x2="18.5" y2="17"/>

Bad: Transform instead of coordinates

<!-- WRONG -->
<g transform="translate(2, 3) rotate(45)">
  <rect x="0" y="0" width="10" height="10"/>
</g>
<!-- RIGHT: Bake the transform into coordinates -->
<rect x="7" y="5" width="10" height="10"/>

Bad: Inconsistent padding

<!-- WRONG: One icon uses full bleed, another has generous padding -->
<!-- Icon A: path starts at x=1 (too close to edge) -->
<!-- Icon B: path starts at x=4 (too much padding) -->
<!-- RIGHT: Both should start at x=2 (or wherever the preset padding specifies) -->