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

# Icon Component

> The base icon component and icon generation utilities for React Icons

## IconBase

The `IconBase` component is the foundational component that renders all icons in React Icons. It handles context integration, size computation, styling, and SVG rendering.

### Usage

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

function CustomIcon(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>
  );
}
```

### Props

<ParamField path="attr" type="Record<string, string>" optional>
  Additional SVG attributes to apply to the root SVG element. These are merged with context attributes and other props.
</ParamField>

<ParamField path="size" type="string | number" optional>
  Icon size. Can be a number (interpreted as pixels) or a string with units (e.g., "24px", "1.5em"). Defaults to "1em" if not specified in props or context.
</ParamField>

<ParamField path="color" type="string" optional>
  Icon color. Accepts any valid CSS color value. If not specified, inherits from the IconContext or uses "currentColor".
</ParamField>

<ParamField path="title" type="string" optional>
  Accessibility title for the icon. When provided, renders a `<title>` element inside the SVG for screen readers.
</ParamField>

<ParamField path="className" type="string" optional>
  CSS class name(s) to apply to the SVG element. Merged with className from IconContext if both are present.
</ParamField>

<ParamField path="style" type="React.CSSProperties" optional>
  Inline styles to apply to the SVG element. Merged with style from IconContext, with component props taking precedence.
</ParamField>

<ParamField path="children" type="React.ReactNode" optional>
  Child elements to render inside the SVG. Typically contains `<path>`, `<circle>`, or other SVG elements.
</ParamField>

All other `React.SVGAttributes<SVGElement>` are also supported and passed through to the underlying `<svg>` element.

### Implementation Details

The IconBase component:

* Consumes the `IconContext` to apply global icon configuration
* Merges context values with component props (props take precedence)
* Sets default SVG attributes: `stroke="currentColor"`, `fill="currentColor"`, `strokeWidth="0"`
* Computes final size from props, context, or defaults to "1em"
* Combines className values from context and props
* Merges style objects with proper precedence (context \< props)
* Renders an optional `<title>` element for accessibility

***

## GenIcon

A factory function that generates icon components from icon tree data structures. This is the primary method used internally to create all icon components in React Icons.

### Signature

```typescript theme={null}
function GenIcon(data: IconTree): (props: IconBaseProps) => React.ReactElement
```

### Parameters

<ParamField path="data" type="IconTree" required>
  The icon tree structure containing the SVG element definitions.

  ```typescript theme={null}
  interface IconTree {
    tag: string;              // SVG element tag name (e.g., "path", "circle")
    attr: { [key: string]: string };  // Element attributes
    child: IconTree[];        // Nested child elements
  }
  ```
</ParamField>

### Returns

Returns a React functional component that accepts `IconBaseProps` and renders the icon.

### Usage

```tsx theme={null}
import { GenIcon, IconTree } from 'react-icons';

const iconData: IconTree = {
  tag: 'svg',
  attr: { viewBox: '0 0 24 24' },
  child: [
    {
      tag: 'path',
      attr: { d: 'M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z' },
      child: []
    }
  ]
};

// Generate the icon component
const MyShieldIcon = GenIcon(iconData);

// Use the generated component
function App() {
  return <MyShieldIcon size={24} color="blue" />;
}
```

### How It Works

1. Takes an `IconTree` data structure describing the SVG elements
2. Returns a function component that accepts `IconBaseProps`
3. The returned component renders an `IconBase` with the tree structure converted to React elements
4. Recursively processes nested child elements to build the complete SVG structure

### Example: Creating a Custom Icon Pack

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

// Define your icon data
const icons = {
  MyCustomHome: {
    tag: 'svg',
    attr: { viewBox: '0 0 24 24' },
    child: [
      {
        tag: 'path',
        attr: { d: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z' },
        child: []
      }
    ]
  },
  MyCustomStar: {
    tag: 'svg',
    attr: { viewBox: '0 0 24 24' },
    child: [
      {
        tag: 'path',
        attr: { d: 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' },
        child: []
      }
    ]
  }
};

// Generate components
export const MyCustomHome = GenIcon(icons.MyCustomHome);
export const MyCustomStar = GenIcon(icons.MyCustomStar);
```

***

## Source Reference

For implementation details, see:

* `iconBase.tsx:39-81` - IconBase component implementation
* `iconBase.tsx:23-29` - GenIcon factory function
* `iconBase.tsx:11-22` - Tree2Element helper for recursive rendering