{"id":15173,"library":"react-bootstrap-icons","title":"React Bootstrap Icons","description":"react-bootstrap-icons is a specialized library that provides the entirety of the Bootstrap Icons collection as individual, configurable React components. Currently, on version 1.11.6, it supports Bootstrap Icons v1.13.1, offering over 2000 SVG icons for use in React applications. The library is actively maintained, with updates typically aligning with new releases of the upstream Bootstrap Icons library. Its primary differentiator is the direct conversion of each icon into a callable React component, allowing for easy integration and customization via standard React props like `color`, `size`, and `className`. It also ships with TypeScript types, enhancing developer experience by providing strong typing for icon names and component props. Unlike generic SVG icon libraries, it is exclusively focused on the Bootstrap Icons set.","status":"active","version":"1.11.6","language":"javascript","source_language":"en","source_url":"https://github.com/ismamz/react-bootstrap-icons","tags":["javascript","react","icons","svg","bootstrap","typescript"],"install":[{"cmd":"npm install react-bootstrap-icons","lang":"bash","label":"npm"},{"cmd":"yarn add react-bootstrap-icons","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-bootstrap-icons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for rendering React components.","package":"react","optional":false}],"imports":[{"note":"Prefer named imports for individual icons to minimize bundle size and enable tree-shaking.","wrong":"const ArrowRight = require('react-bootstrap-icons').ArrowRight;","symbol":"ArrowRight","correct":"import { ArrowRight } from 'react-bootstrap-icons';"},{"note":"Use 'import * as Icon' to access all icons as properties of the 'Icon' object, e.g., Icon.ArrowRight. This is useful for dynamic rendering or accessing many icons.","wrong":"import Icon from 'react-bootstrap-icons';","symbol":"Icon","correct":"import * as Icon from 'react-bootstrap-icons';"},{"note":"Import 'IconProps' for type-checking when creating wrapper components or extending icon functionality in TypeScript.","symbol":"IconProps","correct":"import { IconProps } from 'react-bootstrap-icons';"},{"note":"For dynamic rendering where the icon name is a string variable, import all icons as a namespace object (e.g., `icons`) and then access them using bracket notation: `icons[iconName]`.","wrong":"import { icons } from 'react-bootstrap-icons';","symbol":"icons (dynamic access)","correct":"import * as icons from 'react-bootstrap-icons';"}],"quickstart":{"code":"import React from 'react';\nimport { Stopwatch, PaletteFill, Star } from 'react-bootstrap-icons';\n\nexport default function MyIconDisplay() {\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n      <Stopwatch\n        color=\"teal\"\n        size={48}\n        className=\"my-custom-icon stopwatch-timer\"\n        title=\"Time tracking icon\"\n      />\n      <PaletteFill\n        color=\"#8A2BE2\" \n        size={96}\n        className=\"my-custom-icon color-picker\"\n        title=\"Color palette\"\n      />\n      <Star\n        color=\"gold\"\n        size={32}\n        className=\"my-custom-icon rating-star\"\n        title=\"Rating star\"\n      />\n      <p>\n        These are some example Bootstrap icons rendered as React components with custom styling and accessibility titles.\n      </p>\n    </div>\n  );\n}","lang":"typescript","description":"Demonstrates importing and rendering multiple Bootstrap Icons components with inline props for color, size, className, and accessibility titles."},"warnings":[{"fix":"Always consult the `react-bootstrap-icons` documentation or the source code to confirm the exact `PascalCase` component name for the desired icon.","message":"Icon name casing and number prefixes differ from original Bootstrap Icons names. Icon names follow `PascalCase` (e.g., `arrow-right` becomes `ArrowRight`). If an icon name begins with a number (e.g., `1-circle`), it will be prefixed with `Icon` (e.g., `Icon1Circle`).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use an alternative prop name like `iconName`, `icon`, or `filename` for the string that specifies the icon, as demonstrated in the README's dynamic icon example.","message":"When creating a wrapper component that dynamically renders icons by name (e.g., `<Icon iconName='Stopwatch' />`), avoid using `name` as the prop for the icon string. `name` is a valid SVG attribute and will be passed to the underlying SVG.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Provide a `title` prop to each icon component (e.g., `<ArrowRight title=\"Right Arrow\" />`). This adds an `<title>` element inside the SVG, offering a short text description for screen readers.","message":"SVG icons should always include accessibility attributes. Missing titles can make your application less accessible to users relying on screen readers.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add `import { [IconName] } from 'react-bootstrap-icons';` to the file where the icon is used, replacing `[IconName]` with the actual icon's PascalCase name.","cause":"The specific icon component was used without being imported.","error":"ReferenceError: [IconName] is not defined"},{"fix":"Ensure the string used to access the icon (e.g., `icons[iconName]`) precisely matches the `PascalCase` component name. Double-check for typos or incorrect casing, especially for icons starting with numbers (e.g., `Icon1Circle`). You can `console.log(Object.keys(icons))` to verify available names.","cause":"Attempting to access an icon dynamically from a wildcard import, but the icon name string does not exactly match the component's `PascalCase` name or the component itself is undefined.","error":"TypeError: Cannot read properties of undefined (reading '[IconName]')"},{"fix":"Verify that the `iconName` string correctly resolves to an actual icon component from the `react-bootstrap-icons` library. Ensure the `import * as icons from 'react-bootstrap-icons';` statement is present and that the `iconName` property exactly matches a key within the `icons` object.","cause":"This TypeScript error indicates that a variable intended to be a React component (e.g., `BootstrapIcon` in the dynamic icon example) is not recognized as such. This often happens if the value resolved from `icons[iconName]` is `undefined` or not a valid React component.","error":"JSX element type 'BootstrapIcon' does not have any construct or call signatures."}],"ecosystem":"npm"}