Icons

Use icons to help users understand actions and navigate your service. We use Lucide Icons, an open-source icon library with over 1,500 icons.

Lucide Icons

Browse and search the complete Lucide icon library on their official website. All icons are free, open-source, and designed to work well at small sizes.

How to Use Lucide Icons

Option 1: Lucide CDN (Recommended)

Use the unpkg CDN to load icons directly. Replace [icon-name] with the icon name from Lucide.

<img src="https://unpkg.com/lucide-static@latest/icons/[icon-name].svg" alt="Icon" width="24" height="24">

<!-- Examples -->
<img src="https://unpkg.com/lucide-static@latest/icons/check.svg" alt="Check" width="24" height="24">
<img src="https://unpkg.com/lucide-static@latest/icons/arrow-right.svg" alt="" width="24" height="24">
<img src="https://unpkg.com/lucide-static@latest/icons/search.svg" alt="Search" width="24" height="24">

Option 2: NPM Package

Install Lucide for React, Vue, or vanilla JavaScript projects:

# React
npm install lucide-react

# Vue
npm install lucide-vue-next

# Vanilla JS
npm install lucide

Usage in React:

import { Check, ArrowRight, Search } from 'lucide-react';

function MyComponent() {
  return (
    <div>
      <Check size={24} />
      <ArrowRight size={24} />
      <Search size={24} color="var(--color-primary)" />
    </div>
  );
}

Option 3: Inline SVG

Copy SVG code directly from Lucide.dev for full control over styling:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="20 6 9 17 4 12"></polyline>
</svg>

Icons with Buttons

<button class="btn btn-primary">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2">
    <!-- download icon paths -->
  </svg>
  Download
</button>

<button class="btn btn-secondary">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
       stroke="var(--color-primary)" stroke-width="2">
    <!-- edit icon paths -->
  </svg>
  Edit
</button>

Icon Sizes

Use consistent icon sizes throughout your service:

Accessibility

• Always provide alternative text for meaningful icons
• Use alt="" for decorative icons
• Ensure icons have sufficient contrast
• Don't rely on icons alone to convey meaning
• Pair icons with text labels where possible

When to Use Icons

Do

• Use icons to reinforce meaning alongside text
• Use universally understood icons (search, home, etc.)
• Keep icons simple and recognizable
• Use consistent icons throughout your service

Don't

• Don't use icons without labels for important actions
• Don't create new icons when standard ones exist
• Don't use overly detailed or decorative icons
• Don't mix icon styles from different libraries

Document Type Icons

For file type icons (PDF, Word, Excel, etc.) used in download links, see the Downloads page.