Bootstrap Icons

https://icons.getbootstrap.com/
Admin
Bootstrap Icons is a comprehensive open-source SVG icon library designed for Bootstrap with support...
Tokens:1,173,525
Snippets:9,807
Trust Score:10
Update:5 months ago
Show doc for...
Tokens:
Raw
### Include Bootstrap Icons via CDN

Source: https://icons.getbootstrap.com/

Include the icon fonts stylesheet from jsDelivr in your website's <head> or via @import in CSS to get started quickly.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
```

--------------------------------

### Use File earmark binary fill icon with HTML

Source: https://icons.getbootstrap.com/icons/file-earmark-binary-fill

Use this class to display the icon inline within text.

```HTML
<i class="bi bi-file-earmark-binary-fill"></i>
```

--------------------------------

### Install Bootstrap Icons with npm

Source: https://icons.getbootstrap.com/

Install the Bootstrap Icons library using npm for use in your project.

```bash
npm i bootstrap-icons
```

--------------------------------

### Use Database Fill X Icon with HTML

Source: https://icons.getbootstrap.com/icons/database-fill-x

Include the Database Fill X icon in your HTML using the provided `<i>` tag with the appropriate Bootstrap class.

```html
<i class="bi bi-database-fill-x"></i>
```

--------------------------------

### Use Nvme Icon with HTML

Source: https://icons.getbootstrap.com/icons/nvme

Include the Nvme icon in your HTML using the provided `<i>` tag with the 'bi bi-nvme' class. This is a quick way to add the icon to text.

```html
<i class="bi bi-nvme"></i>
```

--------------------------------

### Copy Skip start fill SVG

Source: https://icons.getbootstrap.com/icons/skip-start-fill

Paste the SVG code directly into your project for the skip start fill icon.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-skip-start-fill" viewBox="0 0 16 16">
  <path d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.54-.313 1.232.066 1.232.696v7.384c0 .63-.692 1.01-1.232.697L5 8.753V12a.5.5 0 0 1-1 0z"/>
</svg>
```

--------------------------------

### Install Bootstrap Icons with Composer

Source: https://icons.getbootstrap.com/

Use Composer to install Bootstrap Icons, which includes SVGs, icon sprite, and icon fonts.

```bash
composer require twbs/bootstrap-icons
```

--------------------------------

### Use Folder x Icon with HTML

Source: https://icons.getbootstrap.com/icons/folder-x

Include this HTML snippet to display the Folder x icon in your project. This is a common way to integrate icons directly into your markup.

```html
<i class="bi bi-folder-x"></i>
```

--------------------------------

### Use Modem Icon with HTML

Source: https://icons.getbootstrap.com/icons/modem

Use the `bi bi-modem` class to display the modem icon inline within text. Ensure Bootstrap Icons CSS is included in your project.

```html
<i class="bi bi-modem"></i>
```

--------------------------------

### Use Skip start fill icon with HTML

Source: https://icons.getbootstrap.com/icons/skip-start-fill

Use this class to display the skip start fill icon inline in your HTML.

```html
<i class="bi bi-skip-start-fill"></i>
```

--------------------------------

### Use File Earmark Check Fill Icon with CSS

Source: https://icons.getbootstrap.com/icons/file-earmark-check-fill

Use this class to display the icon inline with text. Ensure the Bootstrap Icons CSS is included in your project.

```html
<i class="bi bi-file-earmark-check-fill"></i>
```

--------------------------------

### Embed Skip Start Icon SVG

Source: https://icons.getbootstrap.com/icons/skip-start

Paste this SVG code directly into your project to display the Skip Start icon. This method provides more control over the icon's appearance.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-skip-start" viewBox="0 0 16 16">
  <path d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.52-.302 1.233.043 1.233.696v7.384c0 .653-.713.998-1.233.696L5 8.752V12a.5.5 0 0 1-1 0zm7.5.633L5.696 8l5.804 3.367z"/>
</svg>
```

--------------------------------

### Use File Earmark X Fill Icon with HTML

Source: https://icons.getbootstrap.com/icons/file-earmark-x-fill

Use this icon as a class within an <i> tag for inline text.

```html
<i class="bi bi-file-earmark-x-fill"></i>
```

--------------------------------

### Use Skip Start Button Fill Icon with HTML

Source: https://icons.getbootstrap.com/icons/skip-start-btn-fill

Use this class to display the skip start button fill icon inline with text or within other HTML elements.

```html
<i class="bi bi-skip-start-btn-fill"></i>
```

--------------------------------

### Embed Skip Start Circle as SVG

Source: https://icons.getbootstrap.com/icons/skip-start-circle

Embed the Skip Start Circle icon directly into your HTML using the provided SVG code. This method offers more control over styling and scalability.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-skip-start-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
  <path d="M10.229 5.055a.5.5 0 0 0-.52.038L7 7.028V5.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0V8.972l2.71 1.935a.5.5 0 0 0 .79-.407v-5a.5.5 0 0 0-.271-.445"/>
</svg>
```

--------------------------------

### Use Folder2 open Icon with CSS

Source: https://icons.getbootstrap.com/icons/folder2-open

Use the 'bi bi-folder2-open' class to display the icon inline. This is useful for adding visual cues within text or alongside other elements.

```HTML
<i class="bi bi-folder2-open"></i>
```

--------------------------------

### Copy Skip Start Button Icon as SVG

Source: https://icons.getbootstrap.com/icons/skip-start-btn

Paste this SVG code directly into your project to use the Skip Start Button icon. It provides a scalable vector graphic for high-quality display.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-skip-start-btn" viewBox="0 0 16 16">
  <path d="M9.71 5.093a.5.5 0 0 1 .79.407v5a.5.5 0 0 1-.79.407L7 8.972V10.5a.5.5 0 0 1-1 0v-5a.5.5 0 0 1 1 0v1.528z"/>
  <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z"/>
</svg>
```

--------------------------------

### Use File Earmark Text Fill Icon with CSS

Source: https://icons.getbootstrap.com/icons/file-earmark-text-fill

Use this snippet to display the icon using its CSS class. Ensure Bootstrap Icons CSS is included in your project.

```html
<i class="bi bi-file-earmark-text-fill"></i>
```

--------------------------------

### Use Nvme Fill Icon with HTML

Source: https://icons.getbootstrap.com/icons/nvme-fill

Include this HTML snippet to display the Nvme fill icon inline. This is useful for text-based content.

```html
<i class="bi bi-nvme-fill"></i>
```

--------------------------------

### Use Skip Start Icon as Icon Font

Source: https://icons.getbootstrap.com/icons/skip-start

Use this class to render the Skip Start icon when using the icon font library. Ensure the Bootstrap Icons font is properly linked.

```html
<i class="bi bi-skip-start"></i>
```

--------------------------------

### Use Building Fill Add Icon with HTML

Source: https://icons.getbootstrap.com/icons/building-fill-add

Use the 'bi bi-building-fill-add' class within an <i> tag to display the icon. This is a quick way to integrate the icon into existing HTML structures.

```html
<i class="bi bi-building-fill-add"></i>
```

--------------------------------

### Use Skip Start Button Icon with HTML Class

Source: https://icons.getbootstrap.com/icons/skip-start-btn

Use this snippet to include the Skip Start Button icon in your HTML using its predefined class. This is useful for quick integration into web pages.

```html
<i class="bi bi-skip-start-btn"></i>
```

--------------------------------

### Use File Earmark PPT Fill Icon with HTML

Source: https://icons.getbootstrap.com/icons/file-earmark-ppt-fill

Use this class to display the icon inline within text. Ensure Bootstrap Icons CSS is included in your project.

```html
<i class="bi bi-file-earmark-ppt-fill"></i>
```

--------------------------------

### Use Skip Start Circle with Icon Font

Source: https://icons.getbootstrap.com/icons/skip-start-circle

Use this class to display the Skip Start Circle icon when using the Bootstrap icon font library. Ensure the library is correctly included in your project.

```html
<i class="bi bi-skip-start-circle"></i>
```

--------------------------------

### Embed Skip Start Circle Fill Icon as SVG

Source: https://icons.getbootstrap.com/icons/skip-start-circle-fill

Paste the provided SVG code directly into your HTML to embed the Skip Start Circle Fill icon. This method offers more control over the icon's appearance and behavior.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-skip-start-circle-fill" viewBox="0 0 16 16">
  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M9.71 5.093 7 7.028V5.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0V8.972l2.71 1.935a.5.5 0 0 0 .79-.407v-5a.5.5 0 0 0-.79-.407"/>
</svg>
```

--------------------------------

### Use Building Up Icon with HTML

Source: https://icons.getbootstrap.com/icons/building-up

Include this HTML snippet to display the Building Up icon using its CSS class. Ensure Bootstrap Icons CSS is linked.

```html
<i class="bi bi-building-up"></i>
```

--------------------------------

### Use Database Add Icon with HTML

Source: https://icons.getbootstrap.com/icons/database-add

Use this HTML code to display the Database Add icon. It can be directly pasted into your project.

```html
<i class="bi bi-database-add"></i>
```

--------------------------------

### Use Skip Start Button Fill Icon with SVG

Source: https://icons.getbootstrap.com/icons/skip-start-btn-fill

Embed the skip start button fill icon directly into your project's HTML using this SVG code. Adjust width, height, and fill attributes as needed.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-skip-start-btn-fill" viewBox="0 0 16 16">
  <path d="M0 12V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2m9.71-6.907L7 7.028V5.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0V8.972l2.71 1.935a.5.5 0 0 0 .79-.407v-5a.5.5 0 0 0-.79-.407"/>
</svg>
```

--------------------------------

### Use App Icon with Font

Source: https://icons.getbootstrap.com/icons/app

Use the 'bi bi-app' class to display the App icon when using the icon font. This is a quick way to integrate the icon.

```html
<i class="bi bi-app"></i>
```

--------------------------------

### Slash SVG Example

Source: https://icons.getbootstrap.com/icons/slash

Paste this SVG code directly into your project to render the slash icon. It includes attributes for size and color.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-slash" viewBox="0 0 16 16">
  <path d="M11.354 4.646a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708l6-6a.5.5 0 0 1 .708 0"/>
</svg>
```

--------------------------------

### Slash Icon Font Example

Source: https://icons.getbootstrap.com/icons/slash

Use this class to display the slash icon as a web font. Ensure the Bootstrap Icons font is correctly linked.

```html
<i class="bi bi-slash"></i>
```

--------------------------------

### Use Hdd Network Fill Icon with CSS

Source: https://icons.getbootstrap.com/icons/hdd-network-fill

Use this class to display the Hdd Network Fill icon inline with text. Ensure the Bootstrap Icons CSS is included in your project.

```html
<i class="bi bi-hdd-network-fill"></i>
```

--------------------------------

### Use GPU Card Icon with HTML

Source: https://icons.getbootstrap.com/icons/gpu-card

Include this HTML snippet to display the GPU Card icon. It uses the Bootstrap Icons library class.

```HTML
<i class="bi bi-gpu-card"></i>
```

--------------------------------

### Align start SVG embedding

Source: https://icons.getbootstrap.com/icons/align-start

Embed the align-start icon directly into your HTML using the provided SVG code. This method is useful for custom styling or when not using the icon font.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-start" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5"/>
  <path d="M3 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/>
</svg>
```

--------------------------------

### Use Database Fill Add Icon with HTML

Source: https://icons.getbootstrap.com/icons/database-fill-add

Use the 'bi bi-database-fill-add' class within an <i> tag to display the icon. This is a common method for integrating icons into web projects.

```html
<i class="bi bi-database-fill-add"></i>
```

--------------------------------

### Align start icon font usage

Source: https://icons.getbootstrap.com/icons/align-start

Use this class to display the align-start icon when using the Bootstrap icon font. Ensure the icon font is correctly linked in your project.

```html
<i class="bi bi-align-start"></i>
```

--------------------------------

### Use Building Fill X Icon with HTML

Source: https://icons.getbootstrap.com/icons/building-fill-x

Use this class to display the Building Fill X icon inline within your HTML content.

```html
<i class="bi bi-building-fill-x"></i>
```

--------------------------------

### Use Chevron Compact Up Icon with CSS

Source: https://icons.getbootstrap.com/icons/chevron-compact-up

Use this class to display the Chevron Compact Up icon inline with text or within other elements. No additional setup is required beyond including Bootstrap Icons.

```html
<i class="bi bi-chevron-compact-up"></i>
```

--------------------------------

### Use OTF Icon with HTML Class

Source: https://icons.getbootstrap.com/icons/filetype-otf

Use this class to display the OTF file type icon inline within your HTML content. No additional setup is required if Bootstrap Icons CSS is already included.

```html
<i class="bi bi-filetype-otf"></i>
```

--------------------------------

### Use Unity Icon with HTML

Source: https://icons.getbootstrap.com/icons/unity

Use the `<i>` tag with the `bi bi-unity` class to display the Unity icon inline.

```HTML
<i class="bi bi-unity"></i>
```

--------------------------------

### Use Skip Start Circle Fill Icon with Icon Font

Source: https://icons.getbootstrap.com/icons/skip-start-circle-fill

Use the 'bi bi-skip-start-circle-fill' class with an <i> tag to display the icon using the Bootstrap Icons web font. Ensure the Bootstrap Icons font is correctly linked in your project.

```html
<i class="bi bi-skip-start-circle-fill"></i>
```

--------------------------------

### Use Command Icon with HTML

Source: https://icons.getbootstrap.com/icons/command

Use this class to display the command icon inline within text.

```HTML
<i class="bi bi-command"></i>
```

--------------------------------

### Use Modem Fill Icon in HTML

Source: https://icons.getbootstrap.com/icons/modem-fill

Use this class to display the Modem fill icon inline within text.

```html
<i class="bi bi-modem-fill"></i>
```

--------------------------------

### Use Thunderbolt Fill Icon with CSS

Source: https://icons.getbootstrap.com/icons/thunderbolt-fill

Include this snippet in your HTML to display the Thunderbolt Fill icon using its CSS class. Ensure Bootstrap Icons CSS is linked.

```html
<i class="bi bi-thunderbolt-fill"></i>
```

--------------------------------

### Use File X Fill Icon with HTML

Source: https://icons.getbootstrap.com/icons/file-x-fill

Use this snippet to display the File X Fill icon inline within text. Ensure the Bootstrap Icons CSS is included in your project.

```html
<i class="bi bi-file-x-fill"></i>
```

--------------------------------

### Use Menu app fill icon with HTML

Source: https://icons.getbootstrap.com/icons/menu-app-fill

Use this class to display the Menu app fill icon inline within text.

```HTML
<i class="bi bi-menu-app-fill"></i>
```

--------------------------------

### Use Disc Fill Icon with HTML

Source: https://icons.getbootstrap.com/icons/disc-fill

Use the icon's HTML class in your project for inline text, links, or buttons.

```html
<i class="bi bi-disc-fill"></i>
```

--------------------------------

### Use Filetype WAV Icon with HTML

Source: https://icons.getbootstrap.com/icons/filetype-wav

Use the icon's HTML tag to display it. This is useful for directly embedding the icon in your project.

```html
<i class="bi bi-filetype-wav"></i>
```

--------------------------------

### Use Filetype AI Icon with HTML

Source: https://icons.getbootstrap.com/icons/filetype-ai

Use the 'bi bi-filetype-ai' class to display the icon in your HTML. This is useful for inline text or as part of other elements.

```HTML
<i class="bi bi-filetype-ai"></i>
```

--------------------------------

### Use Optical Audio Fill Icon with CSS

Source: https://icons.getbootstrap.com/icons/optical-audio-fill

Use this snippet to include the optical audio fill icon in your project using its CSS class. Ensure the Bootstrap Icons CSS is properly linked.

```html
<i class="bi bi-optical-audio-fill"></i>
```

--------------------------------

### Use Train Front Icon with CSS

Source: https://icons.getbootstrap.com/icons/train-front

Use the `bi bi-train-front` class to display the train front icon inline.

```html
<i class="bi bi-train-front"></i>
```

--------------------------------

### Use Door Open Fill Icon with SVG

Source: https://icons.getbootstrap.com/icons/door-open-fill

Paste the SVG code directly into your project for the door open fill icon.

```HTML
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-open-fill" viewBox="0 0 16 16">
  <path d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15zM11 2h.5a.5.5 0 0 1 .5.5V15h-1zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1"/>
</svg>
```

--------------------------------

### Use File Binary Icon with CSS

Source: https://icons.getbootstrap.com/icons/file-binary

Add the 'bi bi-file-binary' class to an <i> element to display the icon. This is the standard way to use Bootstrap Icons in HTML.

```html
<i class="bi bi-file-binary"></i>
```

--------------------------------

### Use File X Fill Icon with SVG

Source: https://icons.getbootstrap.com/icons/file-x-fill

Copy and paste this SVG code directly into your project to use the File X Fill icon. This method provides more control over the icon's appearance.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-x-fill" viewBox="0 0 16 16">
  <path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M6.854 6.146 8 7.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 8l1.147 1.146a.5.5 0 0 1-.708.708L8 8.707 6.854 9.854a.5.5 0 0 1-.708-.708L7.293 8 6.146 6.854a.5.5 0 1 1 .708-.708"/>
</svg>
```
Tokens:
Raw