🎨 Beam Icons

2,700+ professionally designed React icon components for the Beam Design System. Includes UI icons, illustrative icons, brand logos, country flags, and payment method icons.

🔖 Table of Contents

1. ✨ Features
2. 💻 Installation
3. 🛠️ Usage
4. 🎨 Icon Gallery
5. ✅ Best Practices
6. 🌲 Tree-Shaking

Features

• 2,700+ UI Icons - Comprehensive set of interface icons for every use case
• 380+ Illustrative Icons - Detailed illustrations for empty states and onboarding
• 650+ Logo Icons - Airlines, banks, payment methods, flags, and Viasat branding
• Tree-Shakable - Only bundle the icons you use
• TypeScript - Full type definitions included
• Accessible - ARIA labels and semantic markup
• Customizable - Size, color, and styling props

Installation

npm install @viasat/beam-icons

yarn add @viasat/beam-icons

pnpm add @viasat/beam-icons

Usage

Basic Usage

import { Check, Close, ChevronDown } from '@viasat/beam-icons';

function MyComponent() {
  return (
    <div>
      <Check />
      <Close />
      <ChevronDown />
    </div>
  );
}

Direct Component Import

For maximum tree-shaking efficiency:

import Check from '@viasat/beam-icons/Check';
import Close from '@viasat/beam-icons/Close';

Using with Beam Icon Component

For standardized sizing, theming, and accessibility, use icons with the Icon component from @viasat/beam-react:

import { Icon } from '@viasat/beam-react/Icon';
import { Check, Settings, User } from '@viasat/beam-icons';

function MyComponent() {
  return (
    <div>
      <Icon icon={Check} size="sm" color="success" />
      <Icon icon={Settings} size="md" ariaLabel="Settings" />
      <Icon icon={User} customIconSize={32} customIconColor="#0066cc" />
    </div>
  );
}

The Icon component provides:

• Consistent sizing (xs, sm, md, lg, xl)
• Semantic color tokens (primary, success, danger, warning)
• Built-in accessibility features
• Theme support
• Custom size and color overrides

Icon Categories

UI Icons

Standard interface icons for buttons, navigation, forms, and general UI elements:

import { Home, Settings, Search, User, Calendar, Mail } from '@viasat/beam-icons';

Illustrative Icons

Detailed illustrations perfect for empty states, onboarding, and feature highlights:

import {
  EmptyStateSearch,
  OnboardingWelcome,
  ErrorState,
} from '@viasat/beam-icons/illustrative-icons';

Payment Method Logos

import {
  Visa,
  Mastercard,
  Amex,
  PayPal,
  ApplePay,
} from '@viasat/beam-icons/logos/payments';

Bank Logos

import { BankOfAmerica, Chase, WellsFargo } from '@viasat/beam-icons/logos/banks';

Airline Logos

import { Delta, United, AmericanAirlines } from '@viasat/beam-icons/logos/airlines';

Country Flags

import { UnitedStates, Canada, Mexico } from '@viasat/beam-icons/logos/flags';

Viasat Branding

import {
  ViasatLogoDefault,
  ViasatLogoWhite,
  ViasatLogomarkColor,
} from '@viasat/beam-icons/logos/viasat';

Props

All icon components accept standard SVG props:

<Check
  width={24}
  height={24}
  color="currentColor"
  className="my-icon"
  aria-label="Success"
/>

Common Props

• width / height - Size in pixels (default: 24)
• color - Fill color (default: currentColor)
• className - CSS class for styling
• aria-label - Accessibility label
• Standard HTML/SVG attributes

Icon Gallery

Browse and search the complete icon library in Storybook:

Core Icons

• UI Icons - 2,700+ interface icons
• Illustrative Icons - 380+ detailed illustrations

Logo Icons

• Airlines - Major airline logos
• Banks - Banking institution logos
• Payments - Credit cards and payment method logos
• Flags - Country flag icons
• Viasat - Viasat brand assets

Best Practices

Sizing

Use consistent icon sizes throughout your application:

// Small (16px)
<Icon width={16} height={16} />

// Medium (24px) - Default
<Icon width={24} height={24} />

// Large (32px)
<Icon width={32} height={32} />

Accessibility

Always provide meaningful labels for icons used as interactive elements:

// Good
<button aria-label="Close dialog">
  <Close />
</button>

// Better - use with screen reader text
<button>
  <Close aria-hidden="true" />
  <span className="sr-only">Close dialog</span>
</button>

Color

Icons inherit color from their parent by default:

// Inherits text color
<div style={{ color: 'blue' }}>
  <Check /> {/* Will be blue */}
</div>

// Explicit color
<Check color="red" />

Tree-Shaking

Beam Icons is fully tree-shakable. Import only what you need:

// ✅ Good - Only bundles Check and Close
import { Check, Close } from '@viasat/beam-icons';

// ✅ Better - Most explicit
import Check from '@viasat/beam-icons/Check';
import Close from '@viasat/beam-icons/Close';

// ❌ Avoid - Imports entire library
import * as Icons from '@viasat/beam-icons';

SVG Assets

Access raw SVG files directly:

import checkSvg from '@viasat/beam-icons/assets/icons/check.svg';

Contributing

This package is part of the Beam Design System monorepo. For contribution guidelines, please refer to the main repository documentation.

License

MIT © Viasat