Fidus logoFidus Design System

Icons

Fidus uses Lucide React icons for a consistent, modern icon system. All icons are open-source, accessible, and customizable.

Icon Library

We use Lucide React - a community-maintained fork of Feather Icons with over 1,000+ icons.

Benefits

  • •Consistent design language across all icons
  • •Tree-shakeable (only import icons you use)
  • •Fully accessible with proper ARIA attributes
  • •Customizable size, color, and stroke width
  • •React components (not SVG sprites)

Domain Icons

Each Fidus domain has a representative icon used in cards, navigation, and badges:

Calendar

Calendar domain, events, appointments

DollarSign

Finance domain, budgets, transactions

Plane

Travel domain, trips, flights

Home

Home domain, smart home, maintenance

Heart

Health domain, wellness, medical

ShoppingCart

Shopping domain, lists, purchases

BookOpen

Learning domain, courses, study

MessageSquare

Communication domain, messages, email

System Icons

Common system functionality icons:

Bell

Notifications, alerts

Settings

Settings, configuration

User

User profile, avatar fallback

Search

Search functionality

Navigation Icons

Icons for navigation and user actions:

ChevronRight

Navigate forward, next

ChevronDown

Expand, dropdown

X

Close, dismiss, cancel

Check

Confirm, success, done

Status & Privacy Icons

Icons indicating status, privacy level, and data source:

AlertCircle

Warning, error, attention needed

Info

Information, help, tooltip

Lock

Privacy, security, local data

Cloud

Cloud sync, remote data

Link

External service, connection

Icon Sizes

Consistent sizing scale for different use cases:

Small (12px)

Inline with text, tight spaces

className="h-3 w-3"

Medium (16px) - Default

Buttons, cards, most UI elements

className="h-4 w-4"

Large (20px)

Headers, prominent features

className="h-5 w-5"

Extra Large (24px)

Page headers, hero sections

className="h-6 w-6"

Usage Examples

In Buttons

import { Calendar } from 'lucide-react';
import { Button } from '@fidus/ui/button';
import { Stack } from '@fidus/ui/stack';;

<Button>
  <Stack direction="horizontal" spacing="sm" align="center">
    <Calendar className="h-4 w-4" />
    <span>Add Event</span>
  </Stack>
</Button>

In Card Headers

import { DollarSign } from 'lucide-react';

<OpportunityCard
  title="Budget Alert"
  icon={<DollarSign className="h-5 w-5" />}
  urgency="important"
>
  Card content...
</OpportunityCard>

As Status Indicators

import { Lock, Cloud, Link } from 'lucide-react';

// Privacy badge with icon
<Badge>
  <Lock className="h-3 w-3" /> Local
</Badge>

// Connection status
<Cloud className="h-4 w-4 text-success" />
<Link className="h-4 w-4 text-muted-foreground" />

Customization

Color

Use Tailwind text color utilities:

Stroke Width

Adjust stroke width for visual weight:

Best Practices

  • •Consistent Sizing: Use the standard size scale (h-3, h-4, h-5, h-6)
  • •Semantic Usage: Choose icons that clearly represent their function
  • •Color Contrast: Ensure icons meet WCAG 2.1 AA contrast ratios
  • •Avoid Icon-Only Buttons: Include text labels for clarity
  • •Tree-Shaking: Import only the icons you need
  • •Accessibility: Add aria-label when icon is the only content

Accessibility

Decorative Icons

Icons that accompany text don't need additional labels:

<Button>
  <Stack direction="horizontal" spacing="sm" align="center">
    <Calendar className="h-4 w-4" />
    <span>Add Event</span>  {/* Text provides context */}
  </Stack>
</Button>

Standalone Icons

Icons without text need aria-label:

<button aria-label="Close">
  <X className="h-4 w-4" />
</button>

Resources