SVG icon usage in Bootsrap

Introduction

SVG icons let you add sharp, colorful pictures that look good on any screen size. They keep your website fast and clear.

You want small, clear icons that look good on phones and big screens.

You need icons that can change color or size easily with CSS.

You want to keep your website loading fast with lightweight images.

You want to use icons that fit well with Bootstrap styles.

You want icons that stay sharp even when zoomed in.

Syntax

Bootsrap

<svg class="bi" width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="..."/>
</svg>

Use the fill="currentColor" attribute to make the icon color follow the text color.

Set width and height to control icon size.

Examples

This example shows a simple circle icon with size 24x24 pixels.

Bootsrap

<svg class="bi bi-circle-fill" width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0z"/>
</svg>

This heart icon is filled with red color and sized 32x32 pixels.

Bootsrap

<svg class="bi bi-heart-fill" width="32" height="32" fill="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M8 1C5.243 1 3 3.243 3 6c0 3.314 5 8 5 8s5-4.686 5-8c0-2.757-2.243-5-5-5z"/>
</svg>

A gold star icon with bigger size 40x40 pixels for emphasis.

Bootsrap

<svg class="bi bi-star" width="40" height="40" fill="gold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M8 12.146l-3.717 2.19 1-4.28-3.283-2.85 4.356-.377L8 3.5l1.644 3.33 4.356.377-3.283 2.85 1 4.28z"/>
</svg>

Sample Program

This page shows three Bootstrap SVG icons with different colors and sizes. Each icon is inside a section with a label for screen readers. The icons scale well and keep sharp edges.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap SVG Icon Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background-color: #f8f9fa;
      color: #212529;
    }
    .icon-example {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .icon-example svg {
      flex-shrink: 0;
    }
  </style>
</head>
<body>
  <h1>Bootstrap SVG Icon Usage</h1>
  <section class="icon-example" aria-label="Circle icon example">
    <svg class="bi bi-circle-fill" width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0z"/>
    </svg>
    <p>This is a circle icon that matches the text color and is 32x32 pixels.</p>
  </section>
  <section class="icon-example" aria-label="Heart icon example">
    <svg class="bi bi-heart-fill" width="32" height="32" fill="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
      <path fill-rule="evenodd" d="M8 1C5.243 1 3 3.243 3 6c0 3.314 5 8 5 8s5-4.686 5-8c0-2.757-2.243-5-5-5z"/>
    </svg>
    <p>This heart icon is red and stands out on the page.</p>
  </section>
  <section class="icon-example" aria-label="Star icon example">
    <svg class="bi bi-star" width="40" height="40" fill="gold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M8 12.146l-3.717 2.19 1-4.28-3.283-2.85 4.356-.377L8 3.5l1.644 3.33 4.356.377-3.283 2.85 1 4.28z"/>
    </svg>
    <p>The gold star icon is bigger to catch attention.</p>
  </section>
</body>
</html>

Important Notes

Always add aria-hidden="true" to decorative SVG icons for accessibility. Do not add role="img" to decorative icons.

Use fill="currentColor" to make icons inherit text color, so they fit your design easily.

Bootstrap icons can be customized with CSS for hover effects or color changes.

Summary

SVG icons are sharp and scale well on all devices.

Use Bootstrap SVG icons with fill="currentColor" to match text color.

Always include accessibility labels and roles for better user experience.

Practice

1. What is the main advantage of using SVG icons in Bootstrap over traditional image icons?

easy

A. They scale smoothly without losing quality on any screen size.

B. They load faster because they are always smaller files than images.

C. They automatically add animation effects without extra code.

D. They require no accessibility attributes to be readable.

Solution

1. Step 1: Understand SVG icon properties

   SVG icons are vector graphics, meaning they can scale to any size without losing sharpness or quality.

2. Step 2: Compare with traditional images

   Unlike raster images, SVGs do not pixelate when enlarged, making them ideal for responsive designs.

3. Final Answer:

   They scale smoothly without losing quality on any screen size. -> Option A

4. Quick Check:

   SVG icons scale well = A [OK]

Hint: SVG icons stay sharp at any size, unlike images [OK]

Common Mistakes:

• Thinking SVG files are always smaller than images
• Assuming SVGs add animations automatically
• Ignoring accessibility needs for icons

2. Which of the following is the correct way to set the color of a Bootstrap SVG icon to match surrounding text?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify how SVG color matches text

   Using fill="currentColor" makes the SVG icon inherit the current text color automatically.

2. Step 2: Check other options

   Options A and D set fixed colors, not dynamic. <svg color="text"></svg> uses an invalid attribute for SVG color.

3. Final Answer:

   <svg fill="currentColor"></svg> -> Option A

4. Quick Check:

   Use fill="currentColor" for text color match [OK]

Hint: Use fill="currentColor" to inherit text color [OK]

Common Mistakes:

• Using fixed color codes instead of currentColor
• Trying to use CSS color property inside SVG fill
• Confusing fill with stroke attribute

3. What will be the visible result of this Bootstrap SVG icon code snippet?

<svg class="bi bi-star" width="2rem" height="2rem" fill="currentColor"><use xlink:href="#star" /></svg>

medium

A. A star icon sized 2 rem by 2 rem, colored like the surrounding text.

B. An empty box because the #star symbol is not defined in the snippet.

C. A star icon but always black regardless of text color.

D. A broken image icon because SVG cannot use <use> elements.

Solution

1. Step 1: Understand the use of <use> with xlink:href

   The <use> element references an SVG symbol with id "star" defined elsewhere in the document or sprite.

2. Step 2: Check if #star is defined

   Since the snippet does not define the symbol with id "star", the icon will not render and show empty space or nothing.

3. Final Answer:

   An empty box because the #star symbol is not defined in the snippet. -> Option B

4. Quick Check:

   Undefined symbol reference = empty icon [OK]

Hint: SVG <use> needs defined symbol to show icon [OK]

Common Mistakes:

• Assuming <use> works without symbol definition
• Thinking fill="currentColor" forces black color
• Believing SVG <use> is unsupported

4. Identify the error in this Bootstrap SVG icon usage:

<svg role="img" aria-label="Search icon"><path d="M10 10 L20 20" /></svg>

medium

A. Missing <title> element for accessibility despite role and aria-label.

B. Missing fill attribute to set icon color.

C. Missing width and height attributes for sizing.

D. Incorrect use of <path> element inside SVG.

Solution

1. Step 1: Check SVG accessibility attributes

   The SVG has role="img" and aria-label="Search icon", which is good for screen readers.

2. Step 2: Check for sizing attributes

   SVG icons should have width and height attributes to define visible size; missing here means it may not display properly.

3. Final Answer:

   Missing width and height attributes for sizing. -> Option C

4. Quick Check:

   SVG needs width and height to show correctly [OK]

Hint: Always add width and height to SVG icons [OK]

Common Mistakes:

• Thinking fill attribute is mandatory for visibility
• Assuming aria-label replaces need for sizing
• Believing <path> usage is incorrect here

5. You want to use a Bootstrap SVG icon that changes color based on a button's state (normal and hover). Which approach correctly applies this behavior?

hard

A. Wrap SVG in a <span> and toggle different SVG files on hover.

B. Set a fixed fill color on SVG and change it with JavaScript on hover.

C. Use inline styles on SVG to change fill color on hover directly.

D. Set fill="currentColor" on the SVG and change the button's text color with CSS on hover.

Solution

1. Step 1: Use fill="currentColor" for color inheritance

   Setting fill="currentColor" makes the SVG icon inherit the text color of its container.

2. Step 2: Change button text color on hover with CSS

   By changing the button's text color on hover, the SVG icon color changes automatically without extra code.

3. Final Answer:

   Set fill="currentColor" on the SVG and change the button's text color with CSS on hover. -> Option D

4. Quick Check:

   fill="currentColor" + CSS hover color = dynamic icon color [OK]

Hint: Use fill="currentColor" and CSS text color hover [OK]

Common Mistakes:

• Using fixed fill colors that don't change on hover
• Trying to change SVG fill with inline styles on hover
• Replacing SVG files instead of using CSS color changes