Custom icon integration in Bootsrap

Introduction

Custom icons help make your website unique and easy to understand. They add style and clear meaning to buttons and links.

You want to add a special icon that is not included in Bootstrap's default set.

You need to use your brand's logo as an icon on your site.

You want to improve user experience by using meaningful icons for actions like download, share, or contact.

You want to keep your website design consistent with custom-designed icons.

You want to reduce page load by using SVG icons instead of images.

Syntax

Bootsrap

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

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

You can add Bootstrap classes like bi for styling consistency.

Examples

This example shows a star icon as an SVG. It uses Bootstrap icon class bi for style.

Bootsrap

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
  <path d="M2.866 14.85c-.078.444.36.791.746.593l3.39-1.79 3.389 1.79c.386.198.824-.149.746-.592l-.647-3.766 2.737-2.668c.33-.322.158-.888-.283-.95l-3.778-.55-1.69-3.43c-.197-.4-.73-.4-.927 0l-1.69 3.43-3.778.55c-.441.064-.613.628-.282.95l2.737 2.668-.647 3.766z"/>
</svg>

This shows how to put a custom SVG icon inside a Bootstrap button for a download action.

Bootsrap

<button type="button" class="btn btn-primary">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
    <path d="M.5 9.9a.5.5 0 0 1 .5-.5h4V1.5a.5.5 0 0 1 1 0v7.9h4a.5.5 0 0 1 .5.5v.6a.5.5 0 0 1-.5.5H6v3.5a.5.5 0 0 1-1 0V11h-4a.5.5 0 0 1-.5-.6v-.5z"/>
  </svg>
  Download
</button>

Sample Program

This page shows a large yellow star icon and a blue button with a download icon. Both icons are custom SVGs integrated with Bootstrap styles.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Custom Icon Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container py-5">
    <h1>Custom Icon Integration</h1>
    <p>Here is a custom star icon using SVG inside Bootstrap:</p>
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-star text-warning" viewBox="0 0 16 16" aria-label="Star icon" role="img">
      <path d="M2.866 14.85c-.078.444.36.791.746.593l3.39-1.79 3.389 1.79c.386.198.824-.149.746-.592l-.647-3.766 2.737-2.668c.33-.322.158-.888-.283-.95l-3.778-.55-1.69-3.43c-.197-.4-.73-.4-.927 0l-1.69 3.43-3.778.55c-.441.064-.613.628-.282.95l2.737 2.668-.647 3.766z"/>
    </svg>
    <p class="mt-4">And a button with a custom download icon:</p>
    <button type="button" class="btn btn-primary">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-download me-2" viewBox="0 0 16 16" aria-hidden="true">
        <path d="M.5 9.9a.5.5 0 0 1 .5-.5h4V1.5a.5.5 0 0 1 1 0v7.9h4a.5.5 0 0 1 .5.5v.6a.5.5 0 0 1-.5.5H6v3.5a.5.5 0 0 1-1 0V11h-4a.5.5 0 0 1-.5-.6v-.5z"/>
      </svg>
      Download
    </button>
  </main>
</body>
</html>

Important Notes

Always add aria-label or role="img" to SVG icons for screen readers.

Use fill="currentColor" so icons match the text color automatically.

Keep SVG code small and simple for faster loading.

Summary

Custom icons make your site look unique and clear.

You add them by embedding SVG code inside your HTML.

Use Bootstrap classes and accessibility attributes for best results.

Practice

1. What is the main reason to use custom icons in Bootstrap projects?

easy

A. To increase page loading time

B. To make the website look unique and clear

C. To replace all text with images

D. To avoid using any CSS styles

Solution

1. Step 1: Understand the purpose of custom icons

   Custom icons help make a website visually unique and improve clarity by showing meaningful symbols.

2. Step 2: Compare options

   Options B, C, and D do not describe benefits of custom icons. Only To make the website look unique and clear correctly states the main reason.

3. Final Answer:

   To make the website look unique and clear -> Option B

4. Quick Check:

   Custom icons improve uniqueness and clarity = A [OK]

Hint: Custom icons improve look and clarity, not performance [OK]

Common Mistakes:

• Thinking custom icons slow down the site
• Confusing icons with replacing text content
• Ignoring the visual clarity benefit

2. Which of the following is the correct way to include a custom SVG icon inline in Bootstrap HTML?

easy

A. <svg class='bi'><use xlink:href='#icon-name' /></svg>

B. <img src='icon.svg' class='bi'>

C. <icon name='custom-icon' />

D. <svg href='icon.svg' class='icon'></svg>

Solution

1. Step 1: Identify correct SVG inline usage

   Bootstrap uses <svg> with <use> referencing an icon ID inside an SVG sprite.

2. Step 2: Check each option

   <svg class='bi'><use xlink:href='#icon-name' /></svg> uses <svg> and <use xlink:href='#icon-name' /> which is correct. <img src='icon.svg' class='bi'> uses <img> which is not inline SVG. <icon name='custom-icon' /> uses a non-standard <icon> tag. <svg href='icon.svg' class='icon'></svg> incorrectly uses href on <svg>.

3. Final Answer:

   <svg class='bi'><use xlink:href='#icon-name' /></svg> -> Option A

4. Quick Check:

   Inline SVG with <use> = B [OK]

Hint: Inline SVG uses <svg> with <use xlink:href> [OK]

Common Mistakes:

• Using <img> instead of inline SVG
• Using non-standard tags like <icon>
• Incorrect attributes on <svg> tag

3. What will be the visual result of this code snippet?

<svg class='bi' width='2em' height='2em' role='img' aria-label='Star'>
  <use xlink:href='#star-fill' />
</svg>

medium

A. A 2em sized filled star icon with accessible label 'Star'

B. A broken image icon because xlink:href is deprecated

C. No icon visible because width and height are too small

D. An empty square with no icon or label

Solution

1. Step 1: Understand SVG rendering with Bootstrap classes

   The class='bi' applies Bootstrap icon styles. Width and height set size to 2em. The <use> references the symbol with id 'star-fill'.

2. Step 2: Check accessibility and visual output

   The role='img' and aria-label='Star' provide screen readers a label. The icon will appear as a filled star sized 2em.

3. Final Answer:

   A 2em sized filled star icon with accessible label 'Star' -> Option A

4. Quick Check:

   SVG with <use> and aria-label shows icon correctly = D [OK]

Hint: SVG with role and aria-label shows accessible icon [OK]

Common Mistakes:

• Thinking xlink:href is always broken (still widely supported)
• Assuming small size hides icon
• Ignoring accessibility attributes

4. Identify the error in this custom icon integration code:

<svg class='bi' width='1em' height='1em' aria-label='Heart'>
  <use href='#heart-fill' />
</svg>

medium

A. Width and height values are invalid units

B. Incorrect use of href instead of xlink:href

C. Missing role='img' attribute for accessibility

D. SVG tag cannot have class attribute

Solution

1. Step 1: Check accessibility attributes

   The aria-label is present but role='img' is missing, which is needed for screen readers to treat SVG as an image.

2. Step 2: Validate other attributes

   Using href is valid in modern browsers (SVG2), so no error there. Width and height with '1em' are valid CSS units. The class attribute is allowed on SVG.

3. Final Answer:

   Missing role='img' attribute for accessibility -> Option C

4. Quick Check:

   SVG needs role='img' for accessibility = C [OK]

Hint: Always add role='img' with aria-label on SVG icons [OK]

Common Mistakes:

• Confusing href and xlink:href usage
• Thinking class attribute is invalid on SVG
• Ignoring accessibility role attribute

5. You want to add a custom icon to a Bootstrap button that changes color on hover and is accessible. Which combination of code and classes is best?

hard

A. <button class='btn btn-primary'><svg class='bi'><use xlink:href='#send-fill'/></svg> Send</button>

B. <button class='btn btn-primary'><svg class='bi text-primary' role='img' aria-label='Send'><use xlink:href='#send-fill'/></svg> Send</button>

C. <button class='btn btn-primary'><img src='send.svg' alt='Send icon'> Send</button>

D. <button class='btn btn-primary'><svg class='bi text-white' role='img' aria-label='Send'><use xlink:href='#send-fill'/></svg> Send</button>

Solution

1. Step 1: Check color and accessibility

   <button class='btn btn-primary'><svg class='bi text-white' role='img' aria-label='Send'><use xlink:href='#send-fill'/></svg> Send</button> uses text-white on the SVG so the icon color contrasts well on the blue button background. It also includes role='img' and aria-label for accessibility.

2. Step 2: Compare other options

   <button class='btn btn-primary'><svg class='bi text-primary' role='img' aria-label='Send'><use xlink:href='#send-fill'/></svg> Send</button> uses text-primary which is blue, so icon won't contrast on blue button. <button class='btn btn-primary'><img src='send.svg' alt='Send icon'> Send</button> uses an image without inline SVG, losing Bootstrap styling. <button class='btn btn-primary'><svg class='bi'><use xlink:href='#send-fill'/></svg> Send</button> lacks color class and accessibility attributes.

3. Final Answer:

   Button with SVG icon using text-white and accessibility attributes -> Option D

4. Quick Check:

   Accessible icon with visible color on button = A [OK]

Hint: Use text-white on icon inside colored buttons for contrast [OK]

Common Mistakes:

• Using icon color same as button background
• Skipping role and aria-label on SVG
• Using img instead of inline SVG for Bootstrap icons