@drift-labs/icons - Drift Common

Overview

@drift-labs/icons is a comprehensive icon library containing 197+ React components auto-generated from Figma designs. Each icon is fully customizable, accessible, and optimized for performance. The icons maintain consistency with Drift’s design system while being flexible enough for various use cases.

Installation

npm install @drift-labs/icons

Peer Dependencies

npm install [email protected]

This package uses React 19 RC but is compatible with React 18.x as well.

Quick Start

Basic Usage

import { Add, ChevronDown, Wallet } from '@drift-labs/icons';

function MyComponent() {
  return (
    <div>
      <Add size={24} color="#000" />
      <ChevronDown size={16} />
      <Wallet size={32} color="blue" />
    </div>
  );
}

With Custom Styling

import { AlertTriangle } from '@drift-labs/icons';

function ErrorMessage() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <AlertTriangle size={20} color="#ff0000" />
      <span>Something went wrong</span>
    </div>
  );
}

Icon Props

All icons accept the following props:

color

string

default:"currentColor"

Set icon fill color. Accepts any valid CSS color value.

size

number

default:"24"

Set width and height of icon in pixels.

autoSize

boolean

default:"false"

Whether to scale icon according to font-size. Sets width and height to 1em.

svgProps

React.SVGProps<SVGSVGElement>

Props to pass directly to the SVG element.

...spanProps

React.HTMLProps<HTMLSpanElement>

Any additional props are passed to the wrapper span element.

Type Definition

import type { IconProps } from '@drift-labs/icons';

type IconProps = {
  color?: string;
  size?: number;
  autoSize?: boolean;
  svgProps?: React.SVGProps<SVGSVGElement>;
} & Omit<React.HTMLProps<HTMLSpanElement>, 'color' | 'size'>;

Available Icons

There are 197 icons available. Below is a categorized selection. See the full list in the source code or by importing from the package.

Add - Plus/add symbol

ArrowLeft - Left arrow

ArrowRight - Right arrow

ChevronDown - Down chevron

ChevronUp - Up chevron

ChevronLeft - Left chevron

ChevronRight - Right chevron

Close - Close/X symbol

Menu - Hamburger menu

MoreVertical - Vertical dots

MoreHorizontal - Horizontal dots

Refresh - Refresh symbol

Status & Indicators

AlertTriangle - Warning

CheckFilled - Filled check

CheckEmpty - Empty check

Checkmark - Checkmark

Info - Information

Error - Error symbol

Success - Success symbol

Loading - Loading spinner

Finance & Trading

Balance - Balance scale

Bank - Bank building

Calculator - Calculator

Chart - Chart/graph

Coins - Coin stack

Dollar - Dollar sign

Wallet - Wallet icon

TrendingUp - Trending up

TrendingDown - Trending down

Position - Position icon

UI Elements

Calendar - Calendar

Clock - Clock

Copy - Copy symbol

Download - Download arrow

Edit - Edit/pencil

Eye - Eye/visible

EyeOff - Eye off/hidden

Filter - Filter funnel

Search - Search magnifier

Settings - Settings gear

Sort - Sort arrows

Star - Star

import {
  Apple,
  Discord,
  Github,
  Google,
  Telegram,
  Twitter,
  Medium,
} from '@drift-labs/icons';

Usage Examples

Responsive Icon Size

Use autoSize to make icons scale with text:

import { Info } from '@drift-labs/icons';

function InfoText() {
  return (
    <p style={{ fontSize: '18px' }}>
      <Info autoSize /> This icon scales with font size
    </p>
  );
}

Dynamic Color

Icons default to currentColor, inheriting text color:

import { Star } from '@drift-labs/icons';

function RatingStars({ active }) {
  return (
    <div style={{ color: active ? '#ffd700' : '#ccc' }}>
      <Star size={24} />
    </div>
  );
}

With Custom SVG Props

import { Loading } from '@drift-labs/icons';

function SpinningLoader() {
  return (
    <Loading
      size={32}
      svgProps={{
        style: {
          animation: 'spin 1s linear infinite',
        },
      }}
    />
  );
}

Button with Icon

import { Download } from '@drift-labs/icons';

function DownloadButton() {
  return (
    <button
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        padding: '8px 16px',
      }}
    >
      <Download size={16} />
      <span>Download Report</span>
    </button>
  );
}

Icon Grid

import { Grid, List, Calendar, Settings } from '@drift-labs/icons';

function ViewSwitcher({ view, setView }) {
  const icons = [
    { name: 'grid', Icon: Grid },
    { name: 'list', Icon: List },
    { name: 'calendar', Icon: Calendar },
    { name: 'settings', Icon: Settings },
  ];
  
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {icons.map(({ name, Icon }) => (
        <button
          key={name}
          onClick={() => setView(name)}
          style={{
            padding: 8,
            backgroundColor: view === name ? '#e0e0e0' : 'transparent',
          }}
        >
          <Icon size={20} color={view === name ? '#000' : '#666'} />
        </button>
      ))}
    </div>
  );
}

Trading Interface Example

import {
  TrendingUp,
  TrendingDown,
  Wallet,
  Position,
  Settings,
} from '@drift-labs/icons';

function TradingHeader() {
  return (
    <header style={{ display: 'flex', gap: 24, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <TrendingUp size={20} color="#00ff00" />
        <span>+12.5%</span>
      </div>
      
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Wallet size={20} />
        <span>0.5 SOL</span>
      </div>
      
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Position size={20} />
        <span>3 Positions</span>
      </div>
      
      <button style={{ marginLeft: 'auto' }}>
        <Settings size={20} />
      </button>
    </header>
  );
}

Icon Generation

Icons are automatically generated from Figma using a custom build script. Do not manually edit icon component files.

Regenerating Icons

To regenerate icons from Figma:

# Set up Figma API token
echo "FIGMA_TOKEN=your_token_here" > .env

# Generate icons
bun run icons

# Build the package
bun run build

Generation Process

Fetch from Figma: The script connects to Figma API and downloads SVG assets
Transform: SVGs are processed with SVGR to create React components
Generate Components: Each icon becomes a typed React component
Export: All icons are exported from src/icons/index.ts

The src/icons/components/ directory is auto-generated. Do not manually edit files in this directory.

Component Structure

Each icon component follows this structure:

import * as React from 'react';
import { IconProps } from '../../types';
import { IconWrapper } from '../IconWrapper';

const Add = (allProps: IconProps) => {
  const { svgProps: props, ...restProps } = allProps;
  return (
    <IconWrapper
      icon={
        <svg
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          {...props}
        >
          <path
            d="M20 11.25a.75.75 0 010 1.5h-7.25V20a.75.75 0 11-1.5 0v-7.25H4a.75.75 0 010-1.5h7.25V4a.75.75 0 111.5 0v7.25H20z"
            fill={allProps.color ? allProps.color : 'currentColor'}
          />
        </svg>
      }
      {...restProps}
    />
  );
};
export default Add;

See the implementation in src/icons/components/Add.tsx:1.

TypeScript Support

Full TypeScript support with exported types:

import type { IconProps } from '@drift-labs/icons';
import { Add } from '@drift-labs/icons';

interface CustomButtonProps {
  icon: React.ComponentType<IconProps>;
  label: string;
}

function CustomButton({ icon: Icon, label }: CustomButtonProps) {
  return (
    <button>
      <Icon size={16} />
      <span>{label}</span>
    </button>
  );
}

// Usage
<CustomButton icon={Add} label="Add Item" />

Accessibility

Icons are wrapped in a <span> element with proper ARIA attributes:

import { Info } from '@drift-labs/icons';

function AccessibleInfo() {
  return (
    <Info
      size={20}
      aria-label="Information"
      role="img"
    />
  );
}

Always provide aria-label when icons convey meaning without accompanying text.

Performance

Tree Shaking

The package is built with tree-shaking support. Only imported icons are included in your bundle:

// Good - only Add icon is bundled
import { Add } from '@drift-labs/icons';

// Avoid - imports entire package
import * as Icons from '@drift-labs/icons';

Bundle Size

Each icon is approximately 0.5-1 KB gzipped. The package uses:

No external dependencies (except React)
Inline SVG (no HTTP requests)
Minimal wrapper code

Styling

CSS Styling

.icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper svg {
  transition: all 0.2s ease;
}

.icon-wrapper:hover svg {
  transform: scale(1.1);
}

import { Settings } from '@drift-labs/icons';

function StyledIcon() {
  return (
    <div className="icon-wrapper">
      <Settings size={24} />
    </div>
  );
}

Tailwind CSS

import { Search } from '@drift-labs/icons';

function SearchInput() {
  return (
    <div className="relative">
      <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
        <Search size={20} />
      </div>
      <input
        className="pl-10 pr-4 py-2 border rounded"
        placeholder="Search..."
      />
    </div>
  );
}

Common Patterns

Icon Button Component

import { IconProps } from '@drift-labs/icons';
import React from 'react';

interface IconButtonProps {
  icon: React.ComponentType<IconProps>;
  onClick: () => void;
  label: string;
  size?: number;
}

function IconButton({ icon: Icon, onClick, label, size = 20 }: IconButtonProps) {
  return (
    <button
      onClick={onClick}
      aria-label={label}
      style={{
        padding: 8,
        border: 'none',
        background: 'transparent',
        cursor: 'pointer',
      }}
    >
      <Icon size={size} />
    </button>
  );
}

// Usage
import { Settings, Refresh } from '@drift-labs/icons';

<IconButton icon={Settings} onClick={() => {}} label="Settings" />
<IconButton icon={Refresh} onClick={() => {}} label="Refresh" />

Status Icon

import { CheckFilled, AlertTriangle, Error } from '@drift-labs/icons';

type Status = 'success' | 'warning' | 'error';

function StatusIcon({ status }: { status: Status }) {
  const config = {
    success: { Icon: CheckFilled, color: '#00ff00' },
    warning: { Icon: AlertTriangle, color: '#ffaa00' },
    error: { Icon: Error, color: '#ff0000' },
  };
  
  const { Icon, color } = config[status];
  
  return <Icon size={20} color={color} />;
}

Dynamic Icon Loader

import * as Icons from '@drift-labs/icons';

function DynamicIcon({ name, ...props }: { name: string } & Icons.IconProps) {
  const Icon = Icons[name as keyof typeof Icons];
  
  if (!Icon) {
    console.warn(`Icon "${name}" not found`);
    return null;
  }
  
  return <Icon {...props} />;
}

// Usage
<DynamicIcon name="Add" size={24} />
<DynamicIcon name="Settings" size={20} color="blue" />

Package Scripts

{
  "scripts": {
    "build": "rm -rf dist && tsc",
    "icons": "node ./src/generate.js",
    "clean-icons": "rm -rf src/icons/components/*"
  }
}

React Package

Use icons with React components and hooks

Common Package

Core utilities for Drift applications

GitHub Repository

View source code and icon generation scripts

Figma Design System

View the source Figma file (requires access)

Full Icon List

Here is the complete alphabetical list of all 197 icons:

View All Icons (197 total)

Accordion, Account, Add, AlertTriangle, Amplify, Apple, ArrowLeft, ArrowRight, Autoconfirm, Balance, Bank, Bankrupt, Bolt, Books, Bridge, Calculator, Calendar, CaretDown, CaretUp, CheckEmpty, CheckFilled, Checkmark, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Circle, Clock, Close, Coins, Connect, Copy, CopyOld, Cross, Cursor, Dashboard, Delegate, DelegateV2, Delete, Deposit, Discord, Disconnect, Dollar, DollarSquare, Donate, DoubleChevronDown, DoubleChevronLeft, DoubleChevronRight, DoubleChevronUp, Download, Earn, Edit, EmptyCheckbox, EmptyRadio, Error, Eth, Exclamation, ExternalLink, Eye, EyeOff, Faucet, FilledCheckbox, FilledRadio, Filter, Github, Google, Governance, Grid, Help, History, Home, Import, Info, InfoOutline, Insurance, Jupiter, Leaderboard, Leverage, Lightning, Link, List, Lock, Logo, LogoSimple, Logout, Maker, Medium, Menu, Minus, Moon, MoreHorizontal, MoreVertical, NotificationBell, NotificationBellOff, OpenOrders, Order, Pause, Pencil, PerpStats, Play, Plus, Portfolio, Position, Power, Profile, Refresh, RefreshOld, Rocket, Search, Send, Settings, Share, Shield, SignOut, Slippage, Sol, SolanaFmIcon, SolanaLogo, SolscanLogo, Sort, SortAsc, SortDesc, Sparkle, Speedometer, Spinner, Spot, SpotStats, Star, Stats, Success, Sun, Swap, Taker, Telegram, Timer, Token, Trade, TradingView, Transactions, Transfer, Trash, TrendingDown, TrendingUp, Triangle, Twitter, TwoArrows, Unlock, Upload, Usdc, User, Users, Vault, Verified, Vote, Wallet, Warning, Withdraw, World, Wrench, X, ZoomIn, ZoomOut

Icon names are exported exactly as shown. Import them with named imports for best tree-shaking.

Get Started

Packages

Core Concepts

​Overview

​Installation

​Peer Dependencies

​Quick Start

​Basic Usage

​With Custom Styling

​Icon Props

​Type Definition

​Available Icons

​Navigation & Actions

​Status & Indicators

​Finance & Trading

​UI Elements

​Social & Platforms

​Usage Examples

​Responsive Icon Size

​Dynamic Color

​With Custom SVG Props

​Button with Icon

​Icon Grid

​Trading Interface Example

​Icon Generation

​Regenerating Icons

​Generation Process

​Component Structure

​TypeScript Support

​Accessibility

​Performance

​Tree Shaking

​Bundle Size

​Styling

​CSS Styling

​Tailwind CSS

​Common Patterns

​Icon Button Component

​Status Icon

​Dynamic Icon Loader

​Package Scripts

​Related Resources

React Package

Common Package

GitHub Repository

Figma Design System

​Full Icon List

Build docs developers (and LLMs) love

Overview

Installation

Peer Dependencies

Quick Start

Basic Usage

With Custom Styling

Icon Props

Type Definition

Available Icons

Navigation & Actions

Status & Indicators

Finance & Trading

UI Elements

Social & Platforms

Usage Examples

Responsive Icon Size

Dynamic Color

With Custom SVG Props

Button with Icon

Icon Grid

Trading Interface Example

Icon Generation

Regenerating Icons

Generation Process

Component Structure

TypeScript Support

Accessibility

Performance

Tree Shaking

Bundle Size

Styling

CSS Styling

Tailwind CSS

Common Patterns

Icon Button Component

Status Icon

Dynamic Icon Loader

Package Scripts

Related Resources

Full Icon List