> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/react-icons/react-icons/llms.txt
> Use this file to discover all available pages before exploring further.

# Frequently Asked Questions

> Common questions and answers about using React Icons

# Frequently Asked Questions

Find answers to common questions about React Icons.

## Installation & Setup

<AccordionGroup>
  <Accordion title="What version of React do I need?">
    React Icons works with React 16.3 and higher (any version that supports Context API).

    ```json package.json theme={null}
    {
      "peerDependencies": {
        "react": "*"
      }
    }
    ```

    The library is compatible with React 16, 17, 18, and 19.
  </Accordion>

  <Accordion title="Can I use React Icons with TypeScript?">
    Yes! React Icons includes native TypeScript support with complete type definitions.

    No additional `@types` package is needed:

    ```tsx theme={null}
    import { IconType } from "react-icons";
    import { FaBeer } from "react-icons/fa";

    type IconProps = {
      icon: IconType;
      size?: number;
    };
    ```

    See the [TypeScript guide](/core-concepts/typescript) for more details.
  </Accordion>

  <Accordion title="Does React Icons work with Next.js?">
    Yes! React Icons works perfectly with Next.js (both Pages Router and App Router).

    ```jsx app/page.jsx theme={null}
    import { FaBeer } from "react-icons/fa";

    export default function Home() {
      return <h1>Welcome <FaBeer /></h1>;
    }
    ```

    Tree-shaking works automatically with Next.js's bundler.
  </Accordion>

  <Accordion title="Can I use React Icons with Create React App?">
    Yes! React Icons works out of the box with Create React App.

    ```jsx theme={null}
    import { FaBeer } from "react-icons/fa";

    function App() {
      return <div><FaBeer /></div>;
    }
    ```

    No additional configuration needed.
  </Accordion>

  <Accordion title="Does it work with Vite?">
    Yes! React Icons works seamlessly with Vite:

    ```jsx theme={null}
    import { FaBeer } from "react-icons/fa";
    ```

    Vite's built-in tree-shaking ensures optimal bundle sizes.
  </Accordion>
</AccordionGroup>

## Bundle Size & Performance

<AccordionGroup>
  <Accordion title="Why is my bundle size so large?">
    If you're seeing a large bundle, you're likely importing incorrectly:

    ```jsx theme={null}
    // ❌ Wrong - imports entire library (~2MB)
    import * as Icons from "react-icons/fa";

    // ✅ Correct - only imports needed icons
    import { FaBeer, FaCoffee } from "react-icons/fa";
    ```

    See the [Performance guide](/guides/performance) for optimization tips.
  </Accordion>

  <Accordion title="How much do icons add to my bundle?">
    Each icon adds approximately 1-2 KB to your bundle:

    * 1 icon ≈ 1-2 KB
    * 10 icons ≈ 10-20 KB
    * 100 icons ≈ 100-200 KB

    With proper tree-shaking, you only pay for what you use.
  </Accordion>

  <Accordion title="Does React Icons support tree-shaking?">
    Yes! React Icons is designed for tree-shaking with ES6 modules.

    The package is configured with `"sideEffects": false`, enabling aggressive tree-shaking in modern bundlers.

    See the [Tree-Shaking guide](/core-concepts/tree-shaking) for details.
  </Accordion>

  <Accordion title="Should I use @react-icons/all-files?">
    Generally, no. The `@react-icons/all-files` package is outdated and has not been updated recently.

    Use the main `react-icons` package instead:

    ```bash theme={null}
    npm install react-icons
    ```

    It provides better tree-shaking and is actively maintained.
  </Accordion>

  <Accordion title="Can I lazy load icons?">
    Yes! You can dynamically import icon modules:

    ```jsx theme={null}
    import { lazy, Suspense } from "react";

    const FaBeer = lazy(() => 
      import("react-icons/fa").then(module => ({ 
        default: module.FaBeer 
      }))
    );

    function App() {
      return (
        <Suspense fallback={<div>Loading...</div>}>
          <FaBeer />
        </Suspense>
      );
    }
    ```

    See [Performance Optimization](/guides/performance) for more patterns.
  </Accordion>
</AccordionGroup>

## Usage & Customization

<AccordionGroup>
  <Accordion title="How do I change icon size?">
    Use the `size` prop:

    ```jsx theme={null}
    // As number (pixels)
    <FaBeer size={24} />

    // As string (any CSS unit)
    <FaBeer size="2em" />
    <FaBeer size="32px" />
    <FaBeer size="2rem" />
    ```

    Or set globally with IconContext:

    ```jsx theme={null}
    <IconContext.Provider value={{ size: "2em" }}>
      <FaBeer /> {/* All icons are 2em */}
    </IconContext.Provider>
    ```
  </Accordion>

  <Accordion title="How do I change icon color?">
    Use the `color` prop or CSS:

    ```jsx theme={null}
    // Via prop
    <FaBeer color="red" />
    <FaBeer color="#61DAFB" />

    // Via CSS color inheritance
    <div style={{ color: "blue" }}>
      <FaBeer /> {/* Inherits blue */}
    </div>

    // Via className
    <FaBeer className="text-blue-500" />
    ```
  </Accordion>

  <Accordion title="Can I use CSS classes with icons?">
    Yes! Use the `className` prop:

    ```jsx theme={null}
    <FaBeer className="my-icon-class" />
    ```

    With Tailwind CSS:

    ```jsx theme={null}
    <FaBeer className="text-blue-500 hover:text-blue-700 w-6 h-6" />
    ```

    With IconContext for global classes:

    ```jsx theme={null}
    <IconContext.Provider value={{ className: "global-icon-class" }}>
      <FaBeer />
    </IconContext.Provider>
    ```
  </Accordion>

  <Accordion title="How do I add hover effects?">
    Use CSS or inline styles:

    ```jsx theme={null}
    // With CSS
    <FaBeer className="icon-hover" />
    ```

    ```css theme={null}
    .icon-hover {
      transition: color 0.2s;
    }
    .icon-hover:hover {
      color: blue;
    }
    ```

    Or with inline styles:

    ```jsx theme={null}
    const [hover, setHover] = useState(false);

    <FaBeer
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ color: hover ? "blue" : "black" }}
    />
    ```
  </Accordion>

  <Accordion title="Can I animate icons?">
    Yes! Icons are SVG elements that can be animated:

    ```jsx theme={null}
    // CSS animation
    <FaBeer className="spin" />
    ```

    ```css theme={null}
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .spin {
      animation: spin 2s linear infinite;
    }
    ```

    Or use animation libraries like Framer Motion:

    ```jsx theme={null}
    import { motion } from "framer-motion";

    <motion.div
      animate={{ rotate: 360 }}
      transition={{ duration: 2, repeat: Infinity }}
    >
      <FaBeer />
    </motion.div>
    ```
  </Accordion>

  <Accordion title="How do I use icons in buttons?">
    Simply include them as children:

    ```jsx theme={null}
    <button>
      <FaBeer /> Grab a beer
    </button>

    // Icon only button
    <button aria-label="Grab a beer">
      <FaBeer />
    </button>

    // With Tailwind
    <button className="flex items-center gap-2">
      <FaBeer /> Grab a beer
    </button>
    ```
  </Accordion>
</AccordionGroup>

## Icon Libraries

<AccordionGroup>
  <Accordion title="Which icon library should I use?">
    It depends on your project:

    * **Font Awesome** - Most comprehensive, 2,000+ icons
    * **Material Design** - For Material UI projects, 4,000+ icons
    * **Heroicons** - For Tailwind CSS projects, clean design
    * **Lucide** - Modern, beautiful, 1,500+ icons
    * **Bootstrap Icons** - For Bootstrap projects, 2,700+ icons

    See the [Icon Libraries Overview](/icon-libraries/overview) for comparisons.
  </Accordion>

  <Accordion title="Can I mix icons from different libraries?">
    Yes! You can import from multiple libraries:

    ```jsx theme={null}
    import { FaBeer } from "react-icons/fa";
    import { MdHome } from "react-icons/md";
    import { HiUser } from "react-icons/hi2";

    function App() {
      return (
        <div>
          <FaBeer />
          <MdHome />
          <HiUser />
        </div>
      );
    }
    ```

    Each icon pack is independently tree-shakeable.
  </Accordion>

  <Accordion title="How do I find the right icon name?">
    Visit the [official React Icons website](https://react-icons.github.io/react-icons) to search and browse all available icons.

    Icon names follow a pattern:

    * Prefix + icon name: `FaBeer`, `MdHome`, `HiUser`
    * Variants use suffixes: `FaRegStar` (regular), `HiOutlineHome` (outline)
  </Accordion>

  <Accordion title="Are the icon packs kept up to date?">
    Yes, the React Icons team regularly updates icon packs to their latest versions. Check the [VERSIONS file](https://github.com/react-icons/react-icons/blob/master/packages/react-icons/VERSIONS) for current versions.

    You can request updates by opening an issue on GitHub.
  </Accordion>

  <Accordion title="Can I request a new icon pack?">
    Yes! Start a [discussion](https://github.com/react-icons/react-icons/discussions/categories/new-icon-set) proposing the new icon pack.

    Include:

    * Icon pack name and website
    * License (must be open source)
    * Number of icons
    * Use case

    See [Adding Icon Sets](/advanced/adding-icon-sets) for details.
  </Accordion>
</AccordionGroup>

## Server-Side Rendering (SSR)

<AccordionGroup>
  <Accordion title="Does React Icons work with SSR?">
    Yes! React Icons works with all SSR frameworks:

    * Next.js (Pages & App Router)
    * Remix
    * Gatsby
    * Astro with React

    Icons render as static SVG on the server.
  </Accordion>

  <Accordion title="Do I need special configuration for Next.js App Router?">
    No special configuration needed. Icons work in both Client and Server Components:

    ```jsx app/page.jsx theme={null}
    import { FaBeer } from "react-icons/fa";

    export default function Page() {
      return <h1>Hello <FaBeer /></h1>;
    }
    ```

    If using IconContext, mark the component as a Client Component:

    ```jsx theme={null}
    "use client";
    import { IconContext } from "react-icons";
    ```
  </Accordion>
</AccordionGroup>

## Accessibility

<AccordionGroup>
  <Accordion title="Are icons accessible?">
    Icons can be made accessible using the `title` prop:

    ```jsx theme={null}
    // Decorative icon (hidden from screen readers)
    <FaBeer aria-hidden="true" />

    // Meaningful icon (announced to screen readers)
    <FaBeer title="Beer" />

    // Icon button
    <button aria-label="Grab a beer">
      <FaBeer aria-hidden="true" />
    </button>
    ```

    See the [Accessibility guide](/guides/accessibility) for best practices.
  </Accordion>

  <Accordion title="Should I use aria-label with icons?">
    For interactive elements (buttons, links), use `aria-label` on the parent:

    ```jsx theme={null}
    // ✅ Correct
    <button aria-label="Delete">
      <FaTrash aria-hidden="true" />
    </button>

    // ❌ Wrong - aria-label on icon doesn't help
    <button>
      <FaTrash aria-label="Delete" />
    </button>
    ```
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Icons are not showing up">
    Check that you:

    1. Installed the package: `npm install react-icons`
    2. Imported correctly: `import { FaBeer } from "react-icons/fa"`
    3. Used the correct icon name (case-sensitive)

    Try a simple test:

    ```jsx theme={null}
    import { FaBeer } from "react-icons/fa";

    console.log(FaBeer); // Should be a function
    ```
  </Accordion>

  <Accordion title="TypeScript shows errors">
    Make sure you:

    1. Don't have `@types/react-icons` installed (conflicts with native types)
    2. Are using a compatible TypeScript version (5.0+)
    3. Have correct imports

    Remove conflicting types:

    ```bash theme={null}
    npm uninstall @types/react-icons
    ```
  </Accordion>

  <Accordion title="Icons appear misaligned">
    React Icons v3+ removed automatic vertical alignment. Add it back:

    ```jsx theme={null}
    // Global
    <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
      {children}
    </IconContext.Provider>

    // Per icon
    <FaBeer style={{ verticalAlign: 'middle' }} />
    ```

    See [Migration from v2 to v3](/migration/v2-to-v3) for details.
  </Accordion>
</AccordionGroup>

## Still Have Questions?

<CardGroup cols={2}>
  <Card title="Troubleshooting" icon="wrench" href="/resources/troubleshooting">
    Find solutions to common issues
  </Card>

  <Card title="GitHub Discussions" icon="comments" href="https://github.com/react-icons/react-icons/discussions">
    Ask the community
  </Card>

  <Card title="GitHub Issues" icon="circle-exclamation" href="https://github.com/react-icons/react-icons/issues">
    Report bugs or request features
  </Card>

  <Card title="Stack Overflow" icon="stack-overflow" href="https://stackoverflow.com/questions/tagged/react-icons">
    Search existing Q\&A
  </Card>
</CardGroup>