Skip to main content

​
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

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

​
attr
Record<string, string>
Additional SVG attributes to apply to the root SVG element. These are merged with context attributes and other props.
​
size
string | number
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.
​
color
string
Icon color. Accepts any valid CSS color value. If not specified, inherits from the IconContext or uses “currentColor”.
​
title
string
Accessibility title for the icon. When provided, renders a <title> element inside the SVG for screen readers.
​
className
string
CSS class name(s) to apply to the SVG element. Merged with className from IconContext if both are present.
​
style
React.CSSProperties
Inline styles to apply to the SVG element. Merged with style from IconContext, with component props taking precedence.
​
children
React.ReactNode
Child elements to render inside the SVG. Typically contains <path>, <circle>, or other SVG elements.
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

function GenIcon(data: IconTree): (props: IconBaseProps) => React.ReactElement

​
Parameters

​
data
IconTree
required
The icon tree structure containing the SVG element definitions.
interface IconTree {
  tag: string;              // SVG element tag name (e.g., "path", "circle")
  attr: { [key: string]: string };  // Element attributes
  child: IconTree[];        // Nested child elements
}

​
Returns

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

​
Usage

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

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