Skip to main content
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:
PropTypeDefaultDescription
sizestring | number"1em"Sets both width and height of the icon
colorstring"currentColor"Sets the icon color
classNamestringundefinedAdds CSS class names
styleReact.CSSPropertiesundefinedInline styles object
titlestringundefinedAccessible title for screen readers
Additionally, all standard SVG attributes from React.SVGAttributes<SVGElement> are supported.

​
Sizing Icons

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>
  );
}
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. 
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

Build docs developers (and LLMs) love

Get started for freeTalk to us