🎨 Claude Guides - SVG Icon Package
Complete set of SVG icons matching Claude's design aesthetic. Modern, minimal, accessible.
Design System
Colors
- Primary Blue:
#2563EB - Primary Purple:
#7C3AED - Gray Accent:
#6B7280 - Light Gray:
#D1D5DB - Success Green:
#10B981 - Warning Orange:
#F59E0B
Styling
- Stroke Width: 2px
- Stroke Linecap: round
- Stroke Linejoin: round
- ViewBox: 24x24 (default)
- Fill: none (stroke-based icons)
- Color: currentColor (inherits from text color)
Ready Icons (Created)
1. claude-icon.svg (48x48)
Abstract AI chat bubble with gradient. Use for: - Logo - Favicon - Header branding - Landing pages
2. arrow-right.svg
Simple arrow pointing right. Use for: - Navigation links - "Next" buttons - Call-to-action - Breadcrumbs
Icons to Create (Use Cursor)
Navigation Icons
<!-- chevron-down.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- chevron-up.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18 15l-6-6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- arrow-left.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 12H5M12 19l-7-7 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Status Icons
<!-- checkmark.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- circle-check.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M8 12l2 2 4-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- x-mark.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M18 18L6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Content Icons
<!-- book.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 4.5A2.5 2.5 0 0 1 6.5 2H20v16H6.5A2.5 2.5 0 0 0 4 20.5v-16z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- code.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3L5 7v10l4 4h10l4-4V7l-4-4H9z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 8l4 4-4 4M15 8l-4 4 4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- lightbulb.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 17h6v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Action Icons
<!-- play.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<polygon points="5 3 19 12 5 21" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- pause.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="4" width="4" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<rect x="14" y="4" width="4" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<!-- download.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15v-9M8 11l4 4 4-4M3 20h18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Utility Icons
<!-- settings.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<!-- info.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M12 16v-4M12 8h.01" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<!-- warning.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 20h20L12 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 9v4M12 17h.01" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Social Icons
<!-- github.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M8 15c0 1.5-1 2-2.5 2S3 16.5 3 15m13 0c0 1.5 1 2 2.5 2S21 16.5 21 15m-8-5c-1 0-1.5 1-1.5 2S11 14 12 14s1.5-1 1.5-2-0.5-2-1.5-2z" fill="none" stroke="currentColor" stroke-width="1.5"/>
</svg>
<!-- twitter.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2s9 5 20 5a9.5 9.5 0 00-9-5.5c4.75 2.25 8-2 8-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Subject Icons
<!-- brain.svg / AI.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 8c0-1 1-2 2-2s2 1 2 2-1 2-2 2-2-1-2-2zM14 8c0-1 1-2 2-2s2 1 2 2-1 2-2 2-2-1-2-2zM8 10v6c0 1.5 1.5 3 4 3s4-1.5 4-3v-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- chart.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3 20V4M3 20h18M8 20v-8M14 20v-5M20 20v-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- database.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="12" cy="5" rx="9" ry="3" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M3 5v7c0 1.5 4 3 9 3s9-1.5 9-3V5" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M3 12c0 1.5 4 3 9 3s9-1.5 9-3" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
Usage in HTML
As Inline SVG
<div class="icon">
<svg viewBox="0 0 24 24" class="icon-small">
<!-- SVG content -->
</svg>
</div>
As CSS Class
.icon {
width: 24px;
height: 24px;
color: #2563EB; /* Applies to currentColor */
}
.icon-primary {
color: #2563EB;
}
.icon-purple {
color: #7C3AED;
}
.icon-success {
color: #10B981;
}
In Markdown
<!-- Reference an icon by its path under assets/svg/.
From a guide README at guides/guide-XX/, prepend `../../`. -->
CSS for SVG Colors
/* Apply gradient to SVGs */
.icon-gradient {
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Hover effects */
.icon:hover {
color: #1E40AF;
transition: color 0.2s ease;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.icon {
color: #BFDBFE; /* Light blue */
}
}
File Structure
assets/
├── svg/
│ ├── claude-icon.svg ✅ Created
│ ├── arrow-right.svg ✅ Created
│ ├── chevron-down.svg [To create with Cursor]
│ ├── chevron-up.svg [To create with Cursor]
│ ├── checkmark.svg [To create with Cursor]
│ ├── circle-check.svg [To create with Cursor]
│ ├── x-mark.svg [To create with Cursor]
│ ├── book.svg [To create with Cursor]
│ ├── code.svg [To create with Cursor]
│ ├── lightbulb.svg [To create with Cursor]
│ ├── play.svg [To create with Cursor]
│ ├── pause.svg [To create with Cursor]
│ ├── download.svg [To create with Cursor]
│ ├── settings.svg [To create with Cursor]
│ ├── info.svg [To create with Cursor]
│ ├── warning.svg [To create with Cursor]
│ ├── github.svg [To create with Cursor]
│ ├── twitter.svg [To create with Cursor]
│ ├── brain.svg [To create with Cursor]
│ ├── chart.svg [To create with Cursor]
│ ├── database.svg [To create with Cursor]
│ ├── rocket.svg [To create with Cursor]
│ ├── star.svg [To create with Cursor]
│ └── puzzle.svg [To create with Cursor]
Quick Copy-Paste SVG Creation
Use this in Cursor:
Create all remaining SVG icons from the list above.
Save each to: assets/svg/[icon-name].svg
Style requirements:
- Viewbox: 0 0 24 24
- Stroke width: 2
- Stroke linecap: round
- Stroke linejoin: round
- Fill: none
- Stroke: currentColor
- Color scheme: Modern blue (#2563EB) and purple (#7C3AED)
- Minimalist, clean design
Testing SVGs
All SVGs should: - ✅ Render correctly at 16x16, 24x24, 48x48, 64x64 - ✅ Display in light and dark themes - ✅ Have sufficient contrast (WCAG AA) - ✅ Use currentColor for flexibility - ✅ Work as inline SVG and image src
Next: Use Cursor to generate remaining icons from templates above. 🎨