Bootstrap Icons

Use 2,700+ free, high-quality Bootstrap Icons in your React application

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,716

Version: 1.11.3

Import: react-icons/bs

Prefix: Bs, BsFill, BsReverse

License: MIT License

Project: 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:

Outline (Default)

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.

Filled

import {
  BsFillHeartFill,
  BsFillStarFill,
  BsFillBookmarkFill,
  BsFillEnvelopeFill,
  BsFillHouseFill
} from 'react-icons/bs';

function FilledIcons() {
  return (
    <div>
      <BsFillHeartFill />     {/* Filled heart */}
      <BsFillStarFill />      {/* Filled star */}
      <BsFillBookmarkFill />  {/* Filled bookmark */}
      <BsFillEnvelopeFill />  {/* Filled envelope */}
      <BsFillHouseFill />     {/* Filled house */}
    </div>
  );
}

Filled icons use the BsFill prefix and Fill suffix.

Navigation

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

Forms

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>
  );
}

Alerts

import {
  BsCheckCircleFill,
  BsExclamationTriangleFill,
  BsInfoCircleFill,
  BsXCircleFill,
  BsX
} from 'react-icons/bs';

function Alert({ type, message, onClose }) {
  const config = {
    success: {
      icon: BsCheckCircleFill,
      className: 'alert-success'
    },
    warning: {
      icon: BsExclamationTriangleFill,
      className: 'alert-warning'
    },
    info: {
      icon: BsInfoCircleFill,
      className: 'alert-info'
    },
    danger: {
      icon: BsXCircleFill,
      className: 'alert-danger'
    }
  };
  
  const { icon: Icon, className } = config[type];
  
  return (
    <div className={`alert ${className}`}>
      <Icon className="alert-icon" />
      <span className="alert-message">{message}</span>
      <button className="alert-close" onClick={onClose}>
        <BsX />
      </button>
    </div>
  );
}

Cards

import {
  BsThreeDotsVertical,
  BsHeart,
  BsFillHeartFill,
  BsChat,
  BsShare,
  BsBookmark,
  BsFillBookmarkFill
} from 'react-icons/bs';

function Card({ item }) {
  const [liked, setLiked] = React.useState(false);
  const [saved, setSaved] = React.useState(false);
  
  return (
    <div className="card">
      <div className="card-header">
        <img src={item.avatar} alt={item.author} />
        <div className="card-author">{item.author}</div>
        <button className="card-menu">
          <BsThreeDotsVertical />
        </button>
      </div>
      
      <img src={item.image} alt={item.title} className="card-image" />
      
      <div className="card-body">
        <div className="card-actions">
          <button onClick={() => setLiked(!liked)}>
            {liked ? 
              <BsFillHeartFill className="text-danger" /> : 
              <BsHeart />
            }
          </button>
          <button><BsChat /></button>
          <button><BsShare /></button>
          <button 
            className="ms-auto" 
            onClick={() => setSaved(!saved)}
          >
            {saved ? 
              <BsFillBookmarkFill /> : 
              <BsBookmark />
            }
          </button>
        </div>
        
        <p className="card-text">{item.description}</p>
      </div>
    </div>
  );
}

Tables

import {
  BsSortUp,
  BsSortDown,
  BsPencil,
  BsTrash,
  BsEye,
  BsFilter
} from 'react-icons/bs';

function DataTable({ data }) {
  const [sortField, setSortField] = React.useState(null);
  const [sortDirection, setSortDirection] = React.useState('asc');
  
  return (
    <div>
      <div className="table-controls">
        <button><BsFilter /> Filter</button>
      </div>
      
      <table className="table">
        <thead>
          <tr>
            <th onClick={() => handleSort('name')}>
              Name
              {sortField === 'name' && (
                sortDirection === 'asc' ? <BsSortUp /> : <BsSortDown />
              )}
            </th>
            <th>Email</th>
            <th>Role</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <tr key={row.id}>
              <td>{row.name}</td>
              <td>{row.email}</td>
              <td>{row.role}</td>
              <td>
                <button><BsEye /> View</button>
                <button><BsPencil /> Edit</button>
                <button><BsTrash /> Delete</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

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:

• heart → BsHeart
• heart-fill → BsFillHeartFill
• arrow-right → BsArrowRight

Popular Bootstrap Icons

Navigation

• 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