Skip to main content

Icons

Juniro uses Lucide React for consistent, accessible icons.

Common Icons​

🏠
Home
🔍
Search
👤
User
⚙️
Settings
📅
Calendar
🔔
Bell
✉️
Mail
❤️
Heart
⭐
Star
📍
MapPin
📞
Phone
✏️
Edit

Action Icons​

➕
Plus
➖
Minus
✕
X / Close
✓
Check
🗑️
Trash
📋
Copy
↗️
ExternalLink
⬇️
Download
←
ArrowLeft
→
ArrowRight
▼
ChevronDown
▲
ChevronUp
☰
Menu
⋮
MoreVertical

Icon Sizes​

🏠
16px (sm)
🏠
20px (md)
🏠
24px (lg)
🏠
32px (xl)

Usage in Code​

import { Home, Search, User, Calendar, Bell, Heart, MapPin, Plus, X, Check } from 'lucide-react';

// Default size (24px)
<Home />

// Custom sizes
<Search size={16} />     // Small
<User size={20} />       // Medium
<Calendar size={24} />   // Large (default)
<Bell size={32} />       // Extra large

// With color
<Heart className="text-red-500" />
<MapPin className="text-orange-500" />

// In buttons
<button className="flex items-center gap-2">
  <Plus size={16} />
  Add Activity
</button>

// Stroke width (default is 2)
<Home strokeWidth={1.5} />  // Thinner
<Home strokeWidth={2.5} />  // Thicker

Icon + Text Alignment​

📍 San Francisco, CA

Best Practices​

  1. Consistent sizing - Use standard sizes (16, 20, 24, 32px)
  2. Proper alignment - Use flex + items-center with text
  3. Accessible - Include aria-label for icon-only buttons
  4. Color contrast - Ensure icons are visible in both themes
// Icon-only button with accessibility
<button aria-label="Close dialog">
  <X size={20} />
</button>

// Icon with text (label provides context)
<button>
  <Plus size={16} />
  <span>Add</span>
</button>

Browse all icons at lucide.dev/icons