> ## 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.

# IconBaseProps

> Props interface for all icon components in React Icons

## Type Definition

```typescript theme={null}
interface IconBaseProps extends React.SVGAttributes<SVGElement> {
  children?: React.ReactNode;
  size?: string | number;
  color?: string;
  title?: string;
}
```

## Overview

`IconBaseProps` is the foundational TypeScript interface that defines the props accepted by all icon components in React Icons. It extends React's `SVGAttributes<SVGElement>`, meaning all standard SVG element attributes are supported in addition to the icon-specific properties.

## Properties

### Icon-Specific Properties

<ResponseField name="size" type="string | number" optional>
  Specifies the width and height of the icon.

  **Accepted Values:**

  * **Number**: Interpreted as pixels (e.g., `24` becomes "24px")
  * **String**: Any valid CSS size unit (e.g., "1em", "24px", "1.5rem", "100%")

  **Default:** `"1em"` (if not specified in props or IconContext)

  **Example:**

  ```tsx theme={null}
  <FaIcon size={24} />           // 24px
  <FaIcon size="2em" />          // 2em
  <FaIcon size="1.5rem" />       // 1.5rem
  ```
</ResponseField>

<ResponseField name="color" type="string" optional>
  Specifies the color of the icon.

  **Accepted Values:**

  * Hex colors: `"#3b82f6"`
  * RGB/RGBA: `"rgb(59, 130, 246)"`, `"rgba(59, 130, 246, 0.5)"`
  * Named colors: `"blue"`, `"red"`, `"currentColor"`
  * HSL: `"hsl(217, 91%, 60%)"`

  **Default:** Inherits from IconContext or uses `"currentColor"`

  **Example:**

  ```tsx theme={null}
  <FaIcon color="#3b82f6" />     // Hex blue
  <FaIcon color="currentColor" /> // Inherits text color
  <FaIcon color="rgb(255,0,0)" /> // Red
  ```
</ResponseField>

<ResponseField name="title" type="string" optional>
  Provides an accessible title for the icon via an SVG `<title>` element.

  **Accessibility:** Screen readers will announce this text when the icon is focused or encountered. Use this for icons that convey meaning or serve as interactive elements.

  **Example:**

  ```tsx theme={null}
  <FaIcon title="Home" />        // Screen readers announce "Home"
  <FaIcon title="Delete item" /> // Descriptive action
  ```

  **Rendered Output:**

  ```html theme={null}
  <svg ...>
    <title>Home</title>
    <!-- icon paths -->
  </svg>
  ```
</ResponseField>

<ResponseField name="children" type="React.ReactNode" optional>
  Additional child elements to render inside the SVG element.

  **Usage:** Typically used internally by the library or when creating custom icons with `IconBase`.

  **Example:**

  ```tsx theme={null}
  <IconBase attr={{ viewBox: '0 0 24 24' }}>
    <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12..." />
    <circle cx="12" cy="12" r="3" />
  </IconBase>
  ```
</ResponseField>

### Inherited SVG Attributes

Since `IconBaseProps` extends `React.SVGAttributes<SVGElement>`, all standard SVG attributes are supported:

<ResponseField name="className" type="string" optional>
  CSS class name(s) to apply to the icon.

  ```tsx theme={null}
  <FaIcon className="w-6 h-6 text-blue-500" />
  ```
</ResponseField>

<ResponseField name="style" type="React.CSSProperties" optional>
  Inline styles to apply to the icon.

  ```tsx theme={null}
  <FaIcon style={{ margin: '0 8px', cursor: 'pointer' }} />
  ```
</ResponseField>

<ResponseField name="onClick" type="React.MouseEventHandler<SVGElement>" optional>
  Click event handler.

  ```tsx theme={null}
  <FaIcon onClick={() => console.log('Icon clicked')} />
  ```
</ResponseField>

<ResponseField name="onMouseEnter" type="React.MouseEventHandler<SVGElement>" optional>
  Mouse enter event handler.

  ```tsx theme={null}
  <FaIcon onMouseEnter={() => setHovered(true)} />
  ```
</ResponseField>

<ResponseField name="onMouseLeave" type="React.MouseEventHandler<SVGElement>" optional>
  Mouse leave event handler.

  ```tsx theme={null}
  <FaIcon onMouseLeave={() => setHovered(false)} />
  ```
</ResponseField>

<ResponseField name="aria-*" type="string" optional>
  ARIA attributes for accessibility.

  ```tsx theme={null}
  <FaIcon aria-label="Home" aria-hidden="true" />
  ```
</ResponseField>

<ResponseField name="data-*" type="string" optional>
  Custom data attributes.

  ```tsx theme={null}
  <FaIcon data-testid="home-icon" data-id="123" />
  ```
</ResponseField>

And many more standard SVG/DOM attributes including:

* `id`, `tabIndex`, `role`
* `onFocus`, `onBlur`, `onKeyDown`, `onKeyUp`
* `transform`, `opacity`, `clipPath`
* All other [SVGAttributes](https://react.dev/reference/react-dom/components/common#common-props)

## Usage Examples

### Basic Usage

```tsx theme={null}
import { FaBeer } from 'react-icons/fa';

function App() {
  return <FaBeer size={24} color="orange" title="Beer" />;
}
```

### With Event Handlers

```tsx theme={null}
import { FaTrash } from 'react-icons/fa';
import { useState } from 'react';

function DeleteButton() {
  const [hovered, setHovered] = useState(false);
  
  return (
    <FaTrash
      size={20}
      color={hovered ? 'red' : 'gray'}
      title="Delete"
      style={{ cursor: 'pointer' }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={() => handleDelete()}
    />
  );
}
```

### With Tailwind CSS

```tsx theme={null}
import { FaHeart } from 'react-icons/fa';

function LikeButton() {
  return (
    <FaHeart 
      className="w-6 h-6 text-red-500 hover:text-red-700 transition-colors"
      title="Like"
    />
  );
}
```

### Responsive Sizing

```tsx theme={null}
import { FaSearch } from 'react-icons/fa';

function SearchIcon() {
  return (
    <FaSearch 
      style={{ 
        fontSize: 'clamp(1rem, 2vw, 2rem)',
        transition: 'font-size 0.2s'
      }}
    />
  );
}
```

### Custom Icon with IconBase

```tsx theme={null}
import { IconBase, IconBaseProps } from 'react-icons';

function CustomShield(props: IconBaseProps) {
  return (
    <IconBase attr={{ viewBox: '0 0 24 24' }} {...props}>
      <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" />
    </IconBase>
  );
}

// Usage
<CustomShield size={32} color="blue" title="Security" />
```

## Type Usage

### Typing Custom Icon Components

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

function MyCustomIcon(props: IconBaseProps) {
  return (
    <IconBase {...props}>
      {/* SVG content */}
    </IconBase>
  );
}
```

### Extending IconBaseProps

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

interface CustomIconProps extends IconBaseProps {
  variant?: 'solid' | 'outline';
  animated?: boolean;
}

function EnhancedIcon({ variant = 'solid', animated, ...props }: CustomIconProps) {
  const className = `icon-${variant} ${animated ? 'animate-spin' : ''}`;
  return <FaIcon {...props} className={className} />;
}
```

### In Function Parameters

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

function wrapIcon(Icon: React.ComponentType<IconBaseProps>, props: IconBaseProps) {
  return (
    <div className="icon-wrapper">
      <Icon {...props} />
    </div>
  );
}
```

## Source Reference

The `IconBaseProps` interface is defined in:

* `iconBase.tsx:31-36` - Interface definition

```typescript theme={null}
export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
  children?: React.ReactNode;
  size?: string | number;
  color?: string;
  title?: string;
}
```