{"library":"react-icons","title":"React Icons","description":"React Icons is a popular library for easily including a vast collection of SVG icons in React projects. It currently stands at stable version `5.6.0` and exhibits a very active release cadence, frequently updating to incorporate the latest versions of various icon libraries and maintain compatibility with modern React versions, such as the recent update for React 19 in v5.5.0. A key differentiator is its use of ES6 imports, enabling effective tree-shaking to include only the icons actively used in a project, thus optimizing bundle size. It aggregates icons from numerous popular sets like Font Awesome 5/6, Material Design, Ionicons, and Octicons, making a wide array of visual assets accessible through a consistent API. Unlike some icon solutions, React Icons directly provides SVG components, which offers high customization and styling flexibility.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-icons"],"cli":null},"imports":["import { FaBeer } from 'react-icons/fa';","import { MdOutlineFastfood } from 'react-icons/md';","import { IconContext } from 'react-icons';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { FaBeer } from 'react-icons/fa';\nimport { MdOutlineFastfood } from 'react-icons/md';\nimport { IconContext } from 'react-icons';\n\nfunction MyIconComponent() {\n  return (\n    <IconContext.Provider value={{ color: \"blue\", size: \"3em\", className: \"global-icons\" }}>\n      <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>\n        <h1>My Favorite Things</h1>\n        <p>\n          Let's go for a <FaBeer title=\"Beer icon\" /> and grab some <MdOutlineFastfood title=\"Fast food icon\" />.\n        </p>\n        <p style={{ color: \"green\", fontSize: \"2em\" }}>\n          You can also override global styles locally, like this <FaBeer />.\n        </p>\n        <p>\n          The icons automatically scale with the text size unless explicitly styled or controlled by context.\n        </p>\n      </div>\n    </IconContext.Provider>\n  );\n}\n\nexport default MyIconComponent;","lang":"typescript","description":"Demonstrates importing icons from different sets, using the `IconContext.Provider` for global styling, and applying local style overrides.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}