TypeScript

React Icons includes full TypeScript support with comprehensive type definitions for all icons, props, and configuration options.

Built-in TypeScript Support

React Icons v3+ includes native TypeScript support - no additional @types package needed:

# TypeScript support included
npm install react-icons

# No need for @types package
# npm install @types/react-icons  ❌ Not needed!

If you previously installed @types/react-icons, you can safely remove it:

npm remove @types/react-icons

Core Types

IconType

The IconType is the type of all icon components:

import type { IconType } from 'react-icons';

// Type definition from iconBase.tsx:38
type IconType = (props: IconBaseProps) => React.ReactNode;

Usage:

import { FaBeer } from 'react-icons/fa';
import type { IconType } from 'react-icons';

// Type an icon component
const BeerIcon: IconType = FaBeer;

// Use in function parameters
function IconWrapper({ Icon }: { Icon: IconType }) {
  return <Icon size="24px" />;
}

// Usage
<IconWrapper Icon={FaBeer} />

IconBaseProps

All icon components accept IconBaseProps:

// From iconBase.tsx:31-36
interface IconBaseProps extends React.SVGAttributes<SVGElement> {
  children?: React.ReactNode;
  size?: string | number;
  color?: string;
  title?: string;
}

Property Details:

Property	Type	Description
`size`	`string \| number`	Sets both width and height. Can be CSS value (“24px”, “2em”) or number
`color`	`string`	Icon color. Any valid CSS color value
`title`	`string`	Adds `<title>` element for accessibility
`className`	`string`	CSS class name(s)
`style`	`React.CSSProperties`	Inline styles
…and all SVG attributes	-	Inherits all SVG element attributes

Usage:

import { FaHome } from 'react-icons/fa';
import type { IconBaseProps } from 'react-icons';

function CustomIcon(props: IconBaseProps) {
  return <FaHome {...props} />;
}

// Usage with type checking
<CustomIcon 
  size={24} 
  color="blue" 
  title="Home Icon"
  className="nav-icon"
  onClick={() => console.log('Clicked')}
/>

IconContext

The context configuration interface:

// From iconContext.tsx:3-9
interface IconContext {
  color?: string;
  size?: string;
  className?: string;
  style?: React.CSSProperties;
  attr?: React.SVGAttributes<SVGElement>;
}

Usage:

import { IconContext } from 'react-icons';
import type { IconContext as IconContextType } from 'react-icons';
import { FaHome, FaUser } from 'react-icons/fa';

const iconConfig: IconContextType = {
  color: '#4A5568',
  size: '24px',
  className: 'app-icon',
  style: { verticalAlign: 'middle' },
  attr: { 'aria-hidden': 'true' },
};

function App() {
  return (
    <IconContext.Provider value={iconConfig}>
      <FaHome />
      <FaUser />
    </IconContext.Provider>
  );
}

Type-Safe Icon Components

Basic Icon Usage

import { FaBeer, FaHome, FaUser } from 'react-icons/fa';
import type { IconBaseProps } from 'react-icons';

// Direct usage - fully typed
function Header() {
  return (
    <div>
      <FaBeer size="24px" color="gold" />
      <FaHome className="icon" />
      <FaUser title="User Profile" />
    </div>
  );
}

// With explicit props type
function Icon(props: IconBaseProps) {
  return <FaBeer {...props} />;
}

Icon Component Props

import { FaStar } from 'react-icons/fa';
import type { IconBaseProps } from 'react-icons';

interface StarRatingProps extends IconBaseProps {
  filled: boolean;
  onRate: () => void;
}

function StarRating({ filled, onRate, ...iconProps }: StarRatingProps) {
  return (
    <FaStar
      {...iconProps}
      color={filled ? 'gold' : 'gray'}
      onClick={onRate}
      style={{ cursor: 'pointer' }}
    />
  );
}

// Usage with full type safety
<StarRating 
  filled={true} 
  onRate={() => console.log('Rated')} 
  size="32px"
/>

Dynamic Icon Selection

import { FaHome, FaUser, FaCog } from 'react-icons/fa';
import type { IconType } from 'react-icons';

// Type-safe icon map
const ICONS: Record<string, IconType> = {
  home: FaHome,
  user: FaUser,
  settings: FaCog,
} as const;

type IconName = keyof typeof ICONS;

interface DynamicIconProps {
  name: IconName;
  size?: string | number;
  color?: string;
}

function DynamicIcon({ name, ...props }: DynamicIconProps) {
  const Icon = ICONS[name];
  return <Icon {...props} />;
}

// Usage: TypeScript ensures only valid icon names
<DynamicIcon name="home" size={24} />     // ✅ Valid
<DynamicIcon name="invalid" size={24} />  // ❌ Type error

Advanced TypeScript Patterns

Generic Icon Wrapper

import type { IconType, IconBaseProps } from 'react-icons';

interface IconWrapperProps extends IconBaseProps {
  icon: IconType;
  label?: string;
}

function IconWrapper({ icon: Icon, label, ...props }: IconWrapperProps) {
  return (
    <div className="icon-wrapper">
      <Icon {...props} />
      {label && <span>{label}</span>}
    </div>
  );
}

// Usage
import { FaHome } from 'react-icons/fa';

<IconWrapper icon={FaHome} label="Home" size="24px" />

Icon Button Component

import type { IconType, IconBaseProps } from 'react-icons';
import type { ButtonHTMLAttributes } from 'react';

interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  icon: IconType;
  iconProps?: IconBaseProps;
  label: string;
}

function IconButton({ 
  icon: Icon, 
  iconProps,
  label, 
  ...buttonProps 
}: IconButtonProps) {
  return (
    <button {...buttonProps} aria-label={label}>
      <Icon {...iconProps} />
      <span>{label}</span>
    </button>
  );
}

// Usage
import { FaSave } from 'react-icons/fa';

<IconButton
  icon={FaSave}
  iconProps={{ size: '20px', color: 'white' }}
  label="Save"
  onClick={() => console.log('Saved')}
/>

Constrained Icon Sets

import { FaHome, FaUser, FaCog, FaBell } from 'react-icons/fa';
import type { IconType } from 'react-icons';

// Define allowed icons
const NAV_ICONS = {
  home: FaHome,
  profile: FaUser,
  settings: FaCog,
  notifications: FaBell,
} as const satisfies Record<string, IconType>;

// Extract type from the icon map
type NavIconName = keyof typeof NAV_ICONS;

interface NavItemProps {
  icon: NavIconName;
  label: string;
  href: string;
}

function NavItem({ icon, label, href }: NavItemProps) {
  const Icon = NAV_ICONS[icon];
  return (
    <a href={href}>
      <Icon size="20px" />
      <span>{label}</span>
    </a>
  );
}

// Usage with autocomplete and type safety
<NavItem icon="home" label="Home" href="/" />       // ✅
<NavItem icon="profile" label="Profile" href="/profile" /> // ✅
<NavItem icon="invalid" label="Invalid" href="/" />   // ❌ Type error

Icon Library Type

import * as FaIcons from 'react-icons/fa';
import * as MdIcons from 'react-icons/md';
import type { IconType } from 'react-icons';

type IconPack = 'fa' | 'md';

interface IconLibrary {
  fa: typeof FaIcons;
  md: typeof MdIcons;
}

const iconLibrary: IconLibrary = {
  fa: FaIcons,
  md: MdIcons,
};

interface PackIconProps {
  pack: IconPack;
  name: string;
  size?: string | number;
}

function PackIcon({ pack, name, ...props }: PackIconProps) {
  const Icon = iconLibrary[pack][name as keyof typeof iconLibrary[typeof pack]] as IconType;
  return Icon ? <Icon {...props} /> : null;
}

Type Inference

TypeScript automatically infers types from React Icons:

import { FaBeer } from 'react-icons/fa';

// Icon type is inferred
const beerIcon = FaBeer;
// Type: IconType

// Props are inferred
const iconProps = { size: '24px', color: 'blue' };
// Type: { size: string; color: string; }

<FaBeer {...iconProps} /> // ✅ Type-safe

Utility Types

Extract Icon Props

import type { IconBaseProps } from 'react-icons';
import type { ComponentProps } from 'react';
import { FaBeer } from 'react-icons/fa';

// Get props type from icon component
type BeerIconProps = ComponentProps<typeof FaBeer>;
// Same as IconBaseProps

// Use in your components
function BeerButton(props: BeerIconProps) {
  return <FaBeer {...props} />;
}

Icon Union Type

import { FaHome, FaUser, FaCog } from 'react-icons/fa';
import type { IconType } from 'react-icons';

type AppIcon = typeof FaHome | typeof FaUser | typeof FaCog;

interface IconDisplayProps {
  Icon: AppIcon;
  size?: string | number;
}

function IconDisplay({ Icon, size = 24 }: IconDisplayProps) {
  return <Icon size={size} />;
}

// Usage
<IconDisplay Icon={FaHome} />  // ✅
<IconDisplay Icon={FaUser} />  // ✅

Common Type Patterns

Optional Icon Prop

import type { IconType, IconBaseProps } from 'react-icons';

interface CardProps {
  title: string;
  icon?: IconType;
  iconProps?: IconBaseProps;
}

function Card({ title, icon: Icon, iconProps }: CardProps) {
  return (
    <div className="card">
      {Icon && <Icon {...iconProps} />}
      <h3>{title}</h3>
    </div>
  );
}

Icon Array

import { FaFacebook, FaTwitter, FaInstagram } from 'react-icons/fa';
import type { IconType } from 'react-icons';

const socialIcons: IconType[] = [
  FaFacebook,
  FaTwitter,
  FaInstagram,
];

function SocialLinks() {
  return (
    <div>
      {socialIcons.map((Icon, index) => (
        <Icon key={index} size="24px" />
      ))}
    </div>
  );
}

Icon with Config

import type { IconType, IconBaseProps } from 'react-icons';
import { FaCheck, FaTimes, FaInfo } from 'react-icons/fa';

interface IconConfig {
  icon: IconType;
  props: IconBaseProps;
}

const statusIcons: Record<string, IconConfig> = {
  success: {
    icon: FaCheck,
    props: { color: 'green', size: '24px' },
  },
  error: {
    icon: FaTimes,
    props: { color: 'red', size: '24px' },
  },
  info: {
    icon: FaInfo,
    props: { color: 'blue', size: '24px' },
  },
};

type Status = keyof typeof statusIcons;

function StatusIcon({ status }: { status: Status }) {
  const { icon: Icon, props } = statusIcons[status];
  return <Icon {...props} />;
}

React.FC with Icons

import type { FC } from 'react';
import type { IconType, IconBaseProps } from 'react-icons';

interface IconComponentProps extends IconBaseProps {
  icon: IconType;
  loading?: boolean;
}

const IconComponent: FC<IconComponentProps> = ({ 
  icon: Icon, 
  loading,
  ...props 
}) => {
  if (loading) {
    return <span>Loading...</span>;
  }
  return <Icon {...props} />;
};

// Usage
import { FaSpinner } from 'react-icons/fa';

<IconComponent icon={FaSpinner} loading={false} size="24px" />

Type Guards

import type { IconType } from 'react-icons';

function isIconType(value: any): value is IconType {
  return typeof value === 'function';
}

function SafeIcon({ icon, ...props }: { icon: unknown }) {
  if (isIconType(icon)) {
    const Icon = icon;
    return <Icon {...props} />;
  }
  return null;
}

Strict Mode

React Icons works with strict TypeScript configurations:

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "skipLibCheck": false
  }
}

Type Exports

React Icons exports all necessary types:

import type {
  IconType,           // Icon component type
  IconBaseProps,      // Icon props interface
  IconContext,        // Context configuration type
  IconTree,           // Internal icon tree structure
} from 'react-icons';

The IconTree type is used internally for icon generation and typically not needed in application code.

Get Started

Core Concepts

Guides

Icon Libraries

Built-in TypeScript Support

Core Types

IconType

IconBaseProps

IconContext

Type-Safe Icon Components

Basic Icon Usage

Icon Component Props

Dynamic Icon Selection

Advanced TypeScript Patterns

Generic Icon Wrapper

Icon Button Component

Constrained Icon Sets

Icon Library Type

Type Inference

Utility Types

Extract Icon Props

Icon Union Type

Common Type Patterns

Optional Icon Prop

Icon Array

Icon with Config

React.FC with Icons

Type Guards

Strict Mode

Type Exports

Next Steps

Icon Imports

Icon Context

​Built-in TypeScript Support

​Core Types

​IconType

​IconBaseProps

​IconContext

​Type-Safe Icon Components

​Basic Icon Usage

​Icon Component Props

​Dynamic Icon Selection

​Advanced TypeScript Patterns

​Generic Icon Wrapper

​Icon Button Component

​Constrained Icon Sets

​Icon Library Type

​Type Inference

​Utility Types

​Extract Icon Props

​Icon Union Type

​Common Type Patterns

​Optional Icon Prop

​Icon Array

​Icon with Config

​React.FC with Icons

​Type Guards

​Strict Mode

​Type Exports

​Next Steps

Icon Imports

Icon Context

Built-in TypeScript Support

Core Types

IconType

IconBaseProps

IconContext

Type-Safe Icon Components

Basic Icon Usage

Icon Component Props

Dynamic Icon Selection

Advanced TypeScript Patterns

Generic Icon Wrapper

Icon Button Component

Constrained Icon Sets

Icon Library Type

Type Inference

Utility Types

Extract Icon Props

Icon Union Type

Common Type Patterns

Optional Icon Prop

Icon Array

Icon with Config

React.FC with Icons

Type Guards

Strict Mode

Type Exports

Next Steps