IconBaseProps

Props interface for all icon components in React Icons

Type Definition

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

size · string | number

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:

<FaIcon size={24} />           // 24px
<FaIcon size="2em" />          // 2em
<FaIcon size="1.5rem" />       // 1.5rem

color · string

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:

<FaIcon color="#3b82f6" />     // Hex blue
<FaIcon color="currentColor" /> // Inherits text color
<FaIcon color="rgb(255,0,0)" /> // Red

title · string

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:

<FaIcon title="Home" />        // Screen readers announce "Home"
<FaIcon title="Delete item" /> // Descriptive action

Rendered Output:

<svg ...>
  <title>Home</title>
  <!-- icon paths -->
</svg>

children · React.ReactNode

Additional child elements to render inside the SVG element.

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

Example:

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

Inherited SVG Attributes

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

className · string

CSS class name(s) to apply to the icon.

<FaIcon className="w-6 h-6 text-blue-500" />

style · React.CSSProperties

Inline styles to apply to the icon.

<FaIcon style={{ margin: '0 8px', cursor: 'pointer' }} />

onClick · React.MouseEventHandler<SVGElement>

Click event handler.

<FaIcon onClick={() => console.log('Icon clicked')} />

onMouseEnter · React.MouseEventHandler<SVGElement>

Mouse enter event handler.

<FaIcon onMouseEnter={() => setHovered(true)} />

onMouseLeave · React.MouseEventHandler<SVGElement>

Mouse leave event handler.

<FaIcon onMouseLeave={() => setHovered(false)} />

aria-* · string

ARIA attributes for accessibility.

<FaIcon aria-label="Home" aria-hidden="true" />

data-* · string

Custom data attributes.

<FaIcon data-testid="home-icon" data-id="123" />

And many more standard SVG/DOM attributes including:

• id, tabIndex, role
• onFocus, onBlur, onKeyDown, onKeyUp
• transform, opacity, clipPath
• All other SVGAttributes

Usage Examples

Basic Usage

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

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

With Event Handlers

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

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

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

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

import { IconBaseProps } from 'react-icons';

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

Extending IconBaseProps

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

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

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