SVG Icon Generator
Input icon concept or description, get clean, production-ready SVG code in multiple styles (line art, filled, gradient). Perfect for designers, developers, and creators who need custom icons without design tools or licensing concerns.
"Describe the icon you need and I'll create clean, production-ready SVG code you can use immediately."
Use Cases
Icon Descriptions
Get detailed descriptions for custom icons to guide designers.
Icon Set Planning
Plan cohesive icon sets with consistent style and proportions.
SVG Code
Generate simple SVG code for basic geometric icons.
Icon Naming
Create systematic naming conventions for icon libraries.
See It In Action
šØ Fintech Icon Set - Minimal Style
---
Design Guidelines:
ā¢ Style: Minimal line icons
ā¢ Stroke width: 1.5-2px
ā¢ Corner radius: 2px (slightly rounded)
ā¢ Grid: 24x24px with 2px padding
ā¢ Colors: Single color (inherit from context)
---
1. Dashboard
āāāāāāāāāāāā
ā ā¢ ā¢ā¢ā¢ ā
ā ā¢ ā¢ā¢ā¢ ā
ā ā
ā ā¬ā¬ā¬ ā¬ā¬ā¬ ā
ā ā¬ā¬ā¬ ā¬ā¬ā¬ ā
āāāāāāāāāāāā
Description:
ā¢ 2x2 grid of rounded squares (top-left larger)
ā¢ Or: Bar chart with ascending bars
ā¢ Conveys: Overview, metrics, at-a-glance data
SVG Approach:
ā¢ 4 rectangles with 2px rounded corners
ā¢ Positioned in grid layout
---
2. Wallet
āāāāāāāāāāāāāāāā
ā ā
ā āÆ ā
ā ā
āāāāāāāāāāāāāāāā
Description:
ā¢ Rectangular wallet shape, landscape
ā¢ Small clasp or circle on right edge (card slot indicator)
ā¢ Minimal: Just outline with subtle fold indication
SVG Approach:
ā¢ Rounded rectangle for body
ā¢ Small circle or indent on right side
ā¢ Optional: Subtle line for bill peek
---
3. Transfer / Send
āāā
ā±
ā ā
ā²
āāā
Description:
ā¢ Two arrows pointing opposite directions (horizontal)
ā¢ Or: Two dots with bidirectional arrow between them
ā¢ Conveys: Exchange, movement, transaction
SVG Approach:
ā¢ Two horizontal arrows with rounded caps
ā¢ Arrows stacked or side-by-side
ā¢ Consider: Slight curve for dynamic feel
---
4. History / Transactions
āāāāā®
āāÆ āŗ ā°ā®
ā ā
ā°āāāāāāÆ
Description:
ā¢ Clock face with counterclockwise arrow
ā¢ Or: Stacked horizontal lines (list view)
ā¢ Conveys: Past activity, timeline, records
SVG Approach:
ā¢ Circle with clock hands at ~10:10
ā¢ Circular arrow around it
ā¢ Alternative: 3 horizontal lines with bullets
---
Naming Convention:
`icon-[category]-[name]-[variant]`
ā¢ icon-nav-dashboard
ā¢ icon-nav-wallet
ā¢ icon-action-transfer
ā¢ icon-nav-history
/command= actions@kb:name= knowledge$param= settingsKey Features
How To Use
$style:minimal, $style:filled, or $style:outlined $size:24 for pixel dimensions $format:svg for actual SVG code Who Is This For?
UI designers, front-end developers, product teams, and anyone who needs custom icons for their projects.
Capabilities
/generate Generate SVG Icon CODE Generate clean, production-ready SVG icon code in multiple styles
Created By
Related Tutorials & Guides
Ready to chat with SVG Icon Generator?
Join thousands of users having conversations with AI on Promptha.