> ## 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.

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

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

## Import Path

```jsx theme={null}
import { BsHeart, BsGithub, BsSearch } from 'react-icons/bs';
```

## Library Details

<Card title="Bootstrap Icons">
  **Icon Count:** 2,716

  **Version:** 1.11.3

  **Import:** `react-icons/bs`

  **Prefix:** `Bs`, `BsFill`, `BsReverse`

  **License:** [MIT License](https://opensource.org/licenses/MIT)

  **Project:** [github.com/twbs/icons](https://github.com/twbs/icons)
</Card>

## Usage Examples

### Basic Usage

```jsx theme={null}
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:

<Tabs>
  <Tab title="Outline (Default)">
    ```jsx theme={null}
    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>
      );
    }
    ```

    <Note>
      Default Bootstrap icons use the `Bs` prefix and are outlined.
    </Note>
  </Tab>

  <Tab title="Filled">
    ```jsx theme={null}
    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>
      );
    }
    ```

    <Note>
      Filled icons use the `BsFill` prefix and `Fill` suffix.
    </Note>
  </Tab>
</Tabs>

### Navigation

```jsx theme={null}
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

```jsx theme={null}
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

<Tabs>
  <Tab title="Forms">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Alerts">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Cards">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Tables">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>
</Tabs>

## Styling Bootstrap Icons

### With Bootstrap CSS

Bootstrap Icons work seamlessly with Bootstrap CSS framework:

```jsx theme={null}
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

```jsx theme={null}
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

```jsx theme={null}
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

<CardGroup cols={2}>
  <Card title="Bootstrap Icons Website" icon="link" href="https://icons.getbootstrap.com/">
    Browse and search all Bootstrap Icons
  </Card>

  <Card title="GitHub Repository" icon="github" href="https://github.com/twbs/icons">
    View source code and report issues
  </Card>

  <Card title="Search All Icons" icon="search" href="https://react-icons.github.io/react-icons/">
    Search Bootstrap Icons in React Icons preview
  </Card>

  <Card title="All Libraries" icon="layer-group" href="/icon-libraries/all-libraries">
    Explore other icon libraries
  </Card>
</CardGroup>