How to Style React Icons: 5 Methods for SVG-Based Components

React icons are ordinary React components that render standard <svg> elements, allowing you to customize them using inline style props, CSS classes, CSS-in-JS libraries, Tailwind utilities, or direct SVG attributes.

Styling icons in React applications requires understanding that every icon component—whether from external libraries like react-icons or internal utilities within the facebook/react repository—outputs native SVG markup. Because these components spread their props directly onto the underlying <svg> element, you can style React icons using any CSS technique that works on regular HTML elements.

How React Icons Work Under the Hood

According to the facebook/react source code, icon implementations are thin wrappers around SVG elements. In packages/react-devtools-shared/src/devtools/views/Icon.js, the DevTools team demonstrates this pattern by accepting className and style props and applying them directly to the rendered <svg> tag. The reconciler logic in packages/react-reconciler/src/ReactFiberHostConfig.js then mounts these elements and applies property updates, while packages/react-dom/src/client/SVGDOMPropertyConfig.js maps React props like fill and stroke to their native SVG attribute equivalents.

Method 1: Inline Style Prop

For quick, one-off customizations, pass a JavaScript style object to the icon's style prop. This approach applies inline CSS directly to the generated <svg> element.

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

function InlineStyleExample() {
  return (
    <FaBeer
      size={48}
      color="goldenrod"
      style={{ margin: "0 1rem", filter: "drop-shadow(2px 2px 2px #000)" }}
    />
  );
}

Method 2: CSS Classes

Assign a className to the icon component and write standard CSS rules. Since the component passes the className through to the underlying <svg>, you can target it with any selector that works on SVG elements.

/* styles.css */
.icon-primary {
  width: 32px;
  height: 32px;
  fill: #1976d2;
  transition: transform 0.2s;
}

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

import { MdFavorite } from "react-icons/md";
import "./styles.css";

function ClassBasedExample() {
  return <MdFavorite className="icon-primary" />;
}

Method 3: CSS-in-JS with Styled-Components

Wrap icons with styled components to create scoped, dynamic styles that react to props or themes. This pattern works because the icon accepts and forwards the className generated by the CSS-in-JS library.

import styled from "styled-components";
import { BsFillAlarmFill } from "react-icons/bs";

const AlarmIcon = styled(BsFillAlarmFill)`
  width: 2rem;
  height: 2rem;
  color: ${({ theme }) => theme.palette.error.main};

  &:hover {
    color: ${({ theme }) => theme.palette.warning.main};
    transform: rotate(15deg);
  }
`;

function StyledComponentExample() {
  return <AlarmIcon />;
}

Method 4: Tailwind CSS Utilities

Apply utility classes via the className prop. Tailwind's sizing utilities (w-, h-) and color utilities (text-, fill-) affect SVG elements exactly as they do HTML elements.

import { AiOutlineHome } from "react-icons/ai";

function TailwindExample() {
  return (
    <AiOutlineHome className="w-8 h-8 text-indigo-600 hover:text-indigo-800" />
  );
}

Method 5: Direct SVG Attributes

Most icon libraries expose props that map directly to SVG attributes. As implemented in packages/react-dom/src/client/SVGDOMPropertyConfig.js, React treats these as first-class props that control vector rendering properties like line weight and fill color.

import { RiHeartFill } from "react-icons/ri";

function SvgAttributeExample() {
  return (
    <RiHeartFill
      size={40}
      color="#e91e63"
      stroke="white"
      strokeWidth={2}
    />
  );
}

Summary

• Inline styles work immediately for ephemeral overrides using the style prop.
• CSS classes provide reusable, theme-aware styling through className.
• CSS-in-JS libraries like Styled-Components create scoped, dynamic styles via forwarded classes.
• Tailwind CSS utilities apply directly to the SVG element for utility-first design.
• SVG attributes offer precise vector control by mapping props like stroke and fill to native SVG properties, as configured in SVGDOMPropertyConfig.js.

Frequently Asked Questions

Can I use CSS Modules to style React icons?

Yes. Import the icon component and apply your CSS Module class using the className prop. The icon component forwards the class to the underlying <svg> element, allowing Module scoping to work exactly as it does with regular HTML elements.

Why doesn't my CSS color property change the icon color?

SVG elements use the fill attribute for solid shapes and stroke for outlines, not the CSS color property. Target the fill CSS property directly, or use the icon's color prop if available, which React maps to the SVG fill attribute via packages/react-dom/src/client/SVGDOMPropertyConfig.js.

How do I make React icons responsive?

Use relative units in your CSS or utility classes. Pass percentage-based values to the size prop, or apply CSS classes with width: 100%; height: auto; to the icon. Since React renders the icon as a standard SVG via packages/react-reconciler/src/ReactFiberHostConfig.js, it responds to container queries and flexbox layouts like any other image element.

Do React icons support animation?

Yes. Because React icons render as DOM elements, you can apply CSS transitions and keyframe animations to the className or style props. The react-icons library and similar packages do not restrict CSS, so transforms, opacity changes, and SVG-specific animations like stroke-dashoffset work without additional configuration.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}