Freightos Icons

A comprehensive icon library with 213 SVG icons designed for Freightos applications. Built with React, TypeScript, and developer experience in mind.

Features

• 🎨 213 Icons - Complete set of professionally designed icons
• 📦 Tree-shakeable - Import only what you need
• 🔷 TypeScript First - Full type definitions included
• ⚡ Dual Format - Both ESM and CJS builds included
• 🎯 Flexible Sizing - Size with numbers, strings, or CSS classes
• 🎨 Themeable - Uses currentColor by default for easy theming
• ♿ Accessible - Proper ARIA support via SVG props
• 🪶 Lightweight - Individual icons are tiny
• ⚛️ React 16.8+ - Works with hooks and modern React

Installation

npm install @freightos/icons
# or
yarn add @freightos/icons
# or
pnpm add @freightos/icons

Usage Guide

Basic Usage

Import icons directly from the package:

import { IconSearch, IconUser, IconDashboard } from '@freightos/icons';

function MyComponent() {
  return (
    <div>
      <IconSearch size={24} />
      <IconUser color="blue" />
      <IconDashboard className="my-icon" />
    </div>
  );
}

Props

All icons accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| string | '1em' | Width and height of the icon | | color | FreightosColor \| string | 'currentColor' | Color of the icon - supports design system colors with autocomplete or any CSS color value | | className | string | - | Additional CSS classes | | ...props | SVGProps<SVGSVGElement> | - | Any valid SVG attributes |

Sizing

Icons are responsive by default and scale with the parent font size. You can customize the size in multiple ways:

// Default size (1em - scales with font-size)
<IconSearch />

// Numeric size (pixels)
<IconSearch size={24} />
<IconSearch size={32} />

// String size (CSS units)
<IconSearch size="2rem" />
<IconSearch size="24px" />

// Responsive with parent font-size
<div className="text-lg">
  <IconSearch /> {/* Icon automatically scales */}
</div>

// Using CSS classes (Tailwind example)
<IconSearch className="w-6 h-6" />

Coloring

Icons use currentColor by default, making them easy to theme. The color prop supports Freightos design system colors with autocomplete, plus any CSS color value:

// Freightos design system colors (with autocomplete!)
<IconSearch color="blue" />
<IconError color="red" />
<IconWarning color="yellow" />
<IconSuccess color="green" />

// Inherits parent text color
<div className="text-blue-500">
  <IconSearch />
</div>

// Any CSS color value
<IconSearch color="#1890ff" />
<IconSearch color="var(--primary-color)" />

// Using CSS classes
<IconSearch className="text-blue-500" />
<IconSearch className="text-gray-900 dark:text-white" />

Available Design System Colors

The following Freightos design system colors are available with autocomplete support:

Blues: blue-10, blue-20, blue, blue-40, blue-50

Reds: red-10, red-20, red, red-40, red-50

Yellows: yellow-10, yellow-20, yellow, yellow-30, yellow-40, yellow-50

Greens: green-10, green-20, green, green-40, green-50

Grays: white, gray-05, gray-10, gray-20, gray-30, gray-40, gray-50, gray-60, gray-70, gray-80, gray-90, gray

Purples: purple-10, purple

Special: transparent

Interactive Icons

// With click handler
<IconSearch 
  onClick={() => console.log('Search clicked')} 
  className="cursor-pointer"
/>

// With hover effects
<IconSearch className="hover:text-blue-500 transition-colors" />

// As a button
<button>
  <IconSearch size={20} />
  Search
</button>

Using Refs

import { useRef } from 'react';
import { IconSearch } from '@freightos/icons';

function Component() {
  const iconRef = useRef<SVGSVGElement>(null);

  return <IconSearch ref={iconRef} />;
}

TypeScript Support

Using the Icon Type

The Icon type allows you to create type-safe variables that hold icon components:

import { Icon, IconSearch, IconUser, IconDashboard } from '@freightos/icons';

// Define an interface with an icon property
interface NavItem {
  title: string;
  icon: Icon;  // Type for icon components
  path: string;
}

// Assign icon components (not JSX elements)
const navItems: NavItem[] = [
  { title: 'Search', icon: IconSearch, path: '/search' },
  { title: 'Profile', icon: IconUser, path: '/profile' },
  { title: 'Dashboard', icon: IconDashboard, path: '/dashboard' },
];

// Use in your component
function Navigation() {
  return (
    <nav>
      {navItems.map(item => {
        const IconComponent = item.icon;
        return (
          <a key={item.title} href={item.path}>
            <IconComponent size={20} />
            <span>{item.title}</span>
          </a>
        );
      })}
    </nav>
  );
}

Type-Safe Component Props

import { Icon } from '@freightos/icons';

interface ButtonProps {
  label: string;
  icon: Icon;
  onClick: () => void;
}

function IconButton({ label, icon: IconComponent, onClick }: ButtonProps) {
  return (
    <button onClick={onClick}>
      <IconComponent size={20} />
      {label}
    </button>
  );
}

// Usage
<IconButton 
  icon={IconSearch} 
  label="Search" 
  onClick={() => console.log('clicked')} 
/>

Configuration Objects

import { Icon, IconDashboard, IconSettings, IconUser } from '@freightos/icons';

interface MenuItem {
  id: string;
  label: string;
  icon: Icon;
  badge?: number;
}

const menuConfig: MenuItem[] = [
  { id: '1', label: 'Dashboard', icon: IconDashboard },
  { id: '2', label: 'Settings', icon: IconSettings },
  { id: '3', label: 'Profile', icon: IconUser, badge: 5 },
];

Dynamic Icon Selection

import { Icon, IconSearch, IconUser, IconDashboard } from '@freightos/icons';

const iconMap: Record<string, Icon> = {
  search: IconSearch,
  user: IconUser,
  dashboard: IconDashboard,
};

function DynamicIcon({ name }: { name: string }) {
  const IconComponent = iconMap[name];
  
  if (!IconComponent) {
    console.warn(`Icon "${name}" not found`);
    return null;
  }
  
  return <IconComponent size={24} />;
}

// Usage
<DynamicIcon name="search" />
<DynamicIcon name="user" />

Styling with CSS Frameworks

Tailwind CSS

// Size with Tailwind
<IconSearch className="w-6 h-6" />
<IconSearch className="w-8 h-8" />

// Color with Tailwind
<IconSearch className="text-blue-500" />
<IconSearch className="text-red-600" />

// Responsive
<IconSearch className="w-4 h-4 md:w-6 md:h-6 lg:w-8 lg:h-8" />

// Dark mode
<IconSearch className="text-gray-900 dark:text-gray-100" />

// Interactive states
<IconSearch className="text-gray-600 hover:text-blue-500 active:text-blue-700 transition-colors" />

// In a button
<button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
  <IconSearch className="w-5 h-5" />
  <span>Search</span>
</button>

Custom CSS

.icon-primary {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.icon-large {
  width: 48px;
  height: 48px;
}

.icon-interactive {
  cursor: pointer;
  transition: color 0.2s;
}

.icon-interactive:hover {
  color: var(--color-primary);
}

<IconSearch className="icon-primary" />
<IconUser className="icon-large" />
<IconDashboard className="icon-interactive" />

Available Icons

All 213 icons are available, organized by category:

• Navigation: Search, MenuOpen, MenuClose, ArrowBack, ArrowForward, CaretUp, CaretDown, etc.
• Actions: Edit, Trash, Save, Copy, Check, Close, Plus, Minus, Refresh, etc.
• Transport: ModeAir, ModeShip, ModeTruck, ModeTrain, ModeAirExpress, etc.
• Business: Company, Factory, Warehouse, Office, Billing, Pay, MoneyCase, etc.
• Communication: Message, Call, Envelope, ChatProgress, NotificationBell, etc.
• User: User, UserCircled, People, AddPerson, etc.
• Status: AlertCircled, InfoCircled, CheckCircled, Verified, Pending, etc.
• Documents: Document, Documents, Download, Upload, Archive, Attachment, etc.
• Interface: Dashboard, Settings, Filter, List, Grid, Table, Tile, etc.
• Logistics: Container, Box, Pallet, Crate, Customs, Insurance, Port, etc.

See your IDE's autocomplete for the complete list of all 213 icons.

Icon Naming Convention

Icons follow a consistent naming pattern:

• SVG filename: search.svg → Component: IconSearch
• SVG filename: menu-open.svg → Component: IconMenuOpen
• SVG filename: mode-air-express.svg → Component: IconModeAirExpress

Development

Adding New Icons

1. Add your SVG file to the svg/ directory (use kebab-case naming: my-icon.svg)
2. Generate React components:

npm run generate

This will:

• Generate React components in src/icons/
• Update the index file with exports
• Replace hardcoded colors with currentColor

3. Build the package:

npm run build

Available Scripts

# Generate icons from SVG files
npm run generate

# Build all formats (ESM + CJS + Types)
npm run build

# Build ESM only
npm run build:esm

# Build CJS only
npm run build:cjs

# Build type definitions only
npm run build:types

# Clean build output
npm run clean

# Generate and build in one command
npm run dev

Maintainer

Maintained by Jiries Nasrawi ([email protected])

License

MIT © Freightos