Customizing Icons

Learn how to customize React Icons with size, color, className, and style props

React Icons provides flexible customization options through the IconBaseProps interface, allowing you to adjust icons to match your design requirements.

Available Props

Every icon component in React Icons accepts the following props:

Prop	Type	Default	Description
size	string | number	"1em"	Sets both width and height of the icon
color	string	"currentColor"	Sets the icon color
className	string	undefined	Adds CSS class names
style	React.CSSProperties	undefined	Inline styles object
title	string	undefined	Accessible title for screen readers

Additionally, all standard SVG attributes from React.SVGAttributes<SVGElement> are supported.

Sizing Icons

String Values

Use any valid CSS size unit:

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

function App() {
  return (
    <div>
      <FaBeer size="1em" />   {/* Default */}
      <FaBeer size="2em" />   {/* 2x size */}
      <FaBeer size="24px" />  {/* Fixed pixel size */}
      <FaBeer size="3rem" />  {/* Relative to root */}
    </div>
  );
}

Numeric Values

Numbers are interpreted as pixels:

import { FaReact } from "react-icons/fa";

function App() {
  return (
    <div>
      <FaReact size={16} />  {/* 16px */}
      <FaReact size={32} />  {/* 32px */}
      <FaReact size={64} />  {/* 64px */}
    </div>
  );
}

Using "1em" (default) makes icons scale with the font size of their parent element, ensuring they align perfectly with text.

Coloring Icons

React Icons use currentColor by default, inheriting the text color from their parent element.

Default Behavior

import { FaHeart } from "react-icons/fa";

function App() {
  return (
    <div style={{ color: "red" }}>
      <p>I <FaHeart /> React Icons</p>
      {/* Icon inherits red color */}
    </div>
  );
}

Adding Classes

Use className to apply CSS classes for styling:

App.jsx

import { FaGithub } from "react-icons/fa";
import "./App.css";

function App() {
  return (
    <div>
      <FaGithub className="icon-primary" />
      <FaGithub className="icon-secondary" />
      <FaGithub className="icon-animated" />
    </div>
  );
}

App.css

.icon-primary {
  color: #1f2937;
  margin-right: 0.5rem;
}

.icon-secondary {
  color: #6b7280;
  opacity: 0.8;
}

.icon-animated {
  transition: transform 0.2s;
}

.icon-animated:hover {
  transform: scale(1.2);
}

When using both IconContext and individual className props, classes are merged with the context class appearing first.

Inline Styles

The style prop accepts any React CSS properties object:

import { FaEnvelope } from "react-icons/fa";

function ContactButton() {
  return (
    <button>
      <FaEnvelope 
        style={{ 
          marginRight: "8px",
          verticalAlign: "middle",
          color: "white"
        }} 
      />
      Contact Us
    </button>
  );
}

1. Define styles

   Create a styles object or use inline styles

2. Apply to icon

   Pass the styles via the style prop

3. Override as needed

   Style props override context styles, allowing per-icon customization

Advanced: SVG Attributes

Since icons extend React.SVGAttributes<SVGElement>, you can use any SVG attribute:

import { FaCircle } from "react-icons/fa";

function App() {
  return (
    <FaCircle
      stroke="blue"
      strokeWidth="2"
      fill="lightblue"
      opacity="0.8"
      onClick={() => console.log("Clicked!")}
      onMouseEnter={() => console.log("Hover!")}
    />
  );
}

Combining Multiple Props

All props work together seamlessly:

import { FaDownload } from "react-icons/fa";

function DownloadButton() {
  return (
    <button className="download-btn">
      <FaDownload
        size={20}
        color="white"
        className="download-icon"
        style={{ marginRight: "8px" }}
        title="Download file"
        aria-hidden="false"
      />
      Download
    </button>
  );
}

Next Steps

Styling

Learn about global styling with IconContext

Accessibility

Make your icons accessible to all users