Using an icon in React Icons

react-icons turns popular icon sets into React components. You import the icons you need by name and render them as JSX tags.

All React Icons examples React Icons: usage and stats

Using an icon in React Icons: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Import by name. FaBeer, FaCoffee and FaPizzaSlice are named imports from react-icons/fa. Only these three icons are pulled into the example. [1]
Render as a component. Each icon is a component, so <FaBeer /> sits inside the heading text just like in the official README snippet. [1]
Size follows the text. The default icon size is 1em, so each icon matches the font size of its parent. The bottom row sets fontSize: 40 on a div to get large icons. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

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

const page = { minHeight: "100vh", background: "#111", display: "flex", alignItems: "center",
  justifyContent: "center", fontFamily: "system-ui, sans-serif" };
const card = { background: "#1e1e1e", color: "#e5e7eb", border: "1px solid #333", borderRadius: 12,
  padding: "20px 24px", boxSizing: "border-box" };

export default function App() {
  return (
    <div style={page}>
      <div style={card}>
        <h3 style={{ margin: "0 0 10px", fontSize: 24 }}>Lets go for a <FaBeer />?</h3>
        <p style={{ margin: "0 0 18px", fontSize: 17, color: "#9ca3af" }}>
          Or first a <FaCoffee /> and a slice of <FaPizzaSlice />.
        </p>
        {/* Icons default to 1em, so they follow the font size */}
        <div style={{ display: "flex", gap: 28, fontSize: 40, color: "#fbbf24" }}>
          <FaBeer />
          <FaCoffee />
          <FaPizzaSlice />
        </div>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Change the fontSize of the bottom row and the three icons scale with it. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-icons 5.7.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More React Icons examples

Icons from different packs in React Icons IconContext in React Icons Aligning icons with text in React Icons Icon size, color and title in React Icons

Sources

React Icons README (GitHub)

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Icons? Ask AgentGid →