> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/react-icons/react-icons/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript

> Complete TypeScript support with type definitions and interfaces for React Icons

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:

```bash theme={null}
# TypeScript support included
npm install react-icons

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

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

  ```bash theme={null}
  npm remove @types/react-icons
  ```
</Note>

## Core Types

### IconType

The `IconType` is the type of all icon components:

```typescript theme={null}
import type { IconType } from 'react-icons';

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

**Usage:**

```tsx theme={null}
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`:

```typescript theme={null}
// 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:**

```tsx theme={null}
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:

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

**Usage:**

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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:

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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:

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

## Type Exports

React Icons exports all necessary types:

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

<Info>
  The `IconTree` type is used internally for icon generation and typically not needed in application code.
</Info>

## Next Steps

<CardGroup cols={2}>
  <Card title="Icon Imports" icon="download" href="/core-concepts/icon-imports">
    Learn about importing icons with full type safety
  </Card>

  <Card title="Icon Context" icon="sliders" href="/core-concepts/icon-context">
    Configure typed icon contexts
  </Card>
</CardGroup>