Skip to main content
Bootstrap Icons is the official icon library for Bootstrap, providing a comprehensive set of high-quality SVG icons for web projects.

Installation

Bootstrap Icons are included with React Icons:
npm install react-icons

Import Path

import { BsHeart, BsGithub, BsSearch } from 'react-icons/bs';

Library Details

Bootstrap Icons

Icon Count: 2,716Version: 1.11.3Import: react-icons/bsPrefix: Bs, BsFill, BsReverseLicense: MIT LicenseProject: github.com/twbs/icons

Usage Examples

Basic Usage

import { BsHeart, BsGithub, BsSearch } from 'react-icons/bs';

function App() {
  return (
    <div>
      <BsHeart />
      <BsGithub />
      <BsSearch />
    </div>
  );
}

Icon Variants

Bootstrap Icons provides multiple variants for many icons:
import {
  BsHeart,
  BsStar,
  BsBookmark,
  BsEnvelope,
  BsHouse
} from 'react-icons/bs';

function OutlineIcons() {
  return (
    <div>
      <BsHeart />     {/* Outline heart */}
      <BsStar />      {/* Outline star */}
      <BsBookmark />  {/* Outline bookmark */}
      <BsEnvelope />  {/* Outline envelope */}
      <BsHouse />     {/* Outline house */}
    </div>
  );
}
Default Bootstrap icons use the Bs prefix and are outlined.
import {
  BsHouse,
  BsPerson,
  BsGear,
  BsBell,
  BsSearch,
  BsList,
  BsX
} from 'react-icons/bs';

function Navigation() {
  return (
    <nav>
      <button><BsList /> Menu</button>
      <a href="/"><BsHouse /> Home</a>
      <a href="/profile"><BsPerson /> Profile</a>
      <a href="/settings"><BsGear /> Settings</a>
      <a href="/notifications"><BsBell /> Notifications</a>
      <button><BsSearch /> Search</button>
    </nav>
  );
}

Buttons and Actions

import {
  BsPlus,
  BsPencil,
  BsTrash,
  BsDownload,
  BsShare,
  BsPrinter,
  BsCheck,
  BsX
} from 'react-icons/bs';

function ActionButtons() {
  return (
    <div className="action-bar">
      <button className="btn-primary">
        <BsPlus /> Add New
      </button>
      <button className="btn-secondary">
        <BsPencil /> Edit
      </button>
      <button className="btn-danger">
        <BsTrash /> Delete
      </button>
      <button className="btn-outline">
        <BsDownload /> Download
      </button>
      <button className="btn-outline">
        <BsShare /> Share
      </button>
      <button className="btn-outline">
        <BsPrinter /> Print
      </button>
    </div>
  );
}

Common Use Cases

import {
  BsEnvelope,
  BsLock,
  BsEye,
  BsEyeSlash,
  BsCheckCircle,
  BsXCircle,
  BsSearch
} from 'react-icons/bs';

function LoginForm() {
  const [showPassword, setShowPassword] = React.useState(false);
  const [email, setEmail] = React.useState('');
  const [isValid, setIsValid] = React.useState(null);
  
  return (
    <form>
      <div className="form-group">
        <label>
          <BsEnvelope /> Email
        </label>
        <div className="input-with-icon">
          <input 
            type="email" 
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Enter your email"
          />
          {isValid === true && <BsCheckCircle className="text-success" />}
          {isValid === false && <BsXCircle className="text-danger" />}
        </div>
      </div>
      
      <div className="form-group">
        <label>
          <BsLock /> Password
        </label>
        <div className="input-with-icon">
          <input 
            type={showPassword ? 'text' : 'password'}
            placeholder="Enter your password"
          />
          <button 
            type="button"
            onClick={() => setShowPassword(!showPassword)}
          >
            {showPassword ? <BsEyeSlash /> : <BsEye />}
          </button>
        </div>
      </div>
      
      <button type="submit" className="btn-primary">
        <BsCheckCircle /> Sign In
      </button>
    </form>
  );
}

Styling Bootstrap Icons

With Bootstrap CSS

Bootstrap Icons work seamlessly with Bootstrap CSS framework:
import { BsHeart, BsTrash } from 'react-icons/bs';

function BootstrapIntegration() {
  return (
    <div>
      {/* Bootstrap button colors */}
      <button className="btn btn-primary">
        <BsHeart /> Like
      </button>
      
      <button className="btn btn-danger">
        <BsTrash /> Delete
      </button>
      
      {/* Bootstrap text colors */}
      <BsHeart className="text-danger" />
      <BsCheckCircle className="text-success" />
      <BsExclamationTriangle className="text-warning" />
      <BsInfoCircle className="text-info" />
    </div>
  );
}

Size and Color

import { BsHeart } from 'react-icons/bs';

function StyledIcons() {
  return (
    <div>
      {/* Inline styles */}
      <BsHeart style={{ fontSize: '24px', color: '#dc3545' }} />
      
      {/* CSS classes */}
      <BsHeart className="fs-1 text-danger" />
      
      {/* IconContext */}
      <IconContext.Provider value={{ size: '1.5em', color: '#0d6efd' }}>
        <BsHeart />
      </IconContext.Provider>
    </div>
  );
}

Icon Naming Convention

Bootstrap Icons follow these patterns:
  • Outline icons: Bs[IconName] (e.g., BsHeart, BsStar)
  • Filled icons: BsFill[IconName]Fill (e.g., BsFillHeartFill, BsFillStarFill)
  • Reverse icons: BsReverse[IconName] (for directional variants)
All names use PascalCase and remove hyphens:
  • heartBsHeart
  • heart-fillBsFillHeartFill
  • arrow-rightBsArrowRight
  • BsHouse / BsFillHouseFill - Home
  • BsList - Menu/hamburger
  • BsX - Close/X
  • BsChevronDown - Dropdown
  • BsArrowLeft - Back arrow
  • BsSearch - Search

Actions

  • BsPlus - Add
  • BsPencil - Edit
  • BsTrash - Delete
  • BsDownload - Download
  • BsUpload - Upload
  • BsShare - Share
  • BsPrinter - Print

Status

  • BsCheckCircle / BsCheckCircleFill - Success
  • BsExclamationTriangle / BsExclamationTriangleFill - Warning
  • BsInfoCircle / BsInfoCircleFill - Info
  • BsXCircle / BsXCircleFill - Error

Content

  • BsHeart / BsFillHeartFill - Like
  • BsStar / BsFillStarFill - Rating
  • BsBookmark / BsFillBookmarkFill - Save
  • BsChat - Comment
  • BsEnvelope - Email

Integration with Bootstrap Components

With React Bootstrap

import { Button, Badge, Alert } from 'react-bootstrap';
import { BsPlus, BsBell, BsCheckCircle } from 'react-icons/bs';

function ReactBootstrapIntegration() {
  return (
    <div>
      <Button variant="primary">
        <BsPlus /> Add Item
      </Button>
      
      <Badge bg="danger">
        <BsBell /> 5
      </Badge>
      
      <Alert variant="success">
        <BsCheckCircle /> Success!
      </Alert>
    </div>
  );
}

Resources

Bootstrap Icons Website

Browse and search all Bootstrap Icons

GitHub Repository

View source code and report issues

Search All Icons

Search Bootstrap Icons in React Icons preview

All Libraries

Explore other icon libraries