Icon sizing and colors in Bootsrap - Deep Dive

Overview - Icon sizing and colors

What is it?

Icon sizing and colors in Bootstrap refer to how icons can be adjusted in size and color to fit the design of a website. Icons are small pictures or symbols used to represent actions, objects, or ideas visually. Bootstrap provides easy ways to change their size and color using classes and CSS styles. This helps make icons clear and attractive on different devices and backgrounds.

Why it matters

Without proper icon sizing and colors, icons can look too big, too small, or blend into the background, making the website confusing or hard to use. Good sizing and color choices improve user experience by making icons easy to see and understand. This helps users navigate websites faster and enjoy the design more, which is important for keeping visitors and making websites accessible.

Where it fits

Before learning icon sizing and colors, you should understand basic HTML and CSS, and how Bootstrap works with classes. After this, you can learn about responsive design and accessibility to make sure icons look good and work well on all devices and for all users.

Mental Model

Core Idea

Icons are like small signs on a road; their size and color must be just right to catch attention and convey meaning clearly.

Think of it like...

Think of icons like traffic signs on a street: if a stop sign is too small or the color is faded, drivers might miss it and cause accidents. Similarly, icons on a website need the right size and color to guide users safely and quickly.

┌───────────────┐
│   Icon Base   │  ← The original icon shape
├───────────────┤
│ Size Classes  │  ← Adjust icon size (small, medium, large)
├───────────────┤
│ Color Classes │  ← Change icon color (primary, danger, etc.)
└───────────────┘

Build-Up - 6 Steps

1

Foundation

What are Bootstrap Icons

Concept: Introduce Bootstrap Icons as a set of ready-made symbols you can use on websites.

Bootstrap Icons are a collection of simple, clean icons designed to work well with Bootstrap. You add them by including the icon's HTML code or using an or

Result

You can add icons to your webpage that look consistent and professional without drawing them yourself.

Understanding what Bootstrap Icons are is the first step to using them effectively in your designs.

2

Foundation

Basic Icon Color Application

Concept: Learn how to change icon colors using Bootstrap's built-in text color classes.

Bootstrap uses text color classes like text-primary, text-danger, text-success to change the color of icons because icons are treated like text. For example, adding class="text-primary" to an icon makes it blue by default.

Result

Icons change color easily by adding simple classes without writing custom CSS.

Knowing that icons inherit text color classes lets you quickly match icon colors to your site's theme.

3

Intermediate

Adjusting Icon Sizes with Utility Classes

🤔Before reading on: do you think icon size changes require custom CSS or built-in classes? Commit to your answer.

Concept: Bootstrap provides utility classes to scale icons up or down without custom CSS.

You can use classes like fs-1, fs-2, fs-3, etc., to change font size, which affects icon size because icons behave like text. For example, class="fs-1" makes the icon very large, while fs-5 is smaller.

Result

Icons resize smoothly and consistently with other text elements using these classes.

Using font size utilities for icons keeps your design consistent and responsive without extra CSS.

4

Intermediate

Combining Size and Color Classes

🤔Before reading on: can you combine multiple Bootstrap classes on one icon to change both size and color? Commit to your answer.

Concept: Multiple Bootstrap classes can be combined on an icon to control size and color simultaneously.

For example, creates a star icon that is medium-large and colored yellow. This combination is simple and powerful for styling icons.

Result

You get flexible control over icon appearance with just class names.

Knowing how to combine classes unlocks quick, clean styling without CSS.

5

Advanced

Customizing Icons with CSS Variables

🤔Before reading on: do you think Bootstrap icons support CSS variables for colors and sizes? Commit to your answer.

Concept: Bootstrap Icons support CSS variables that let you customize colors and sizes beyond built-in classes.

You can override CSS variables like --bs-icon-color or --bs-icon-font-size in your stylesheet to set custom colors or sizes globally or per icon. For example: .bi { --bs-icon-color: #ff6347; --bs-icon-font-size: 2rem; } This changes all icons to tomato color and 2 rem size.

Result

You gain fine control over icon styling that integrates well with Bootstrap's theming system.

Understanding CSS variables lets you create consistent custom themes without losing Bootstrap's benefits.

6

Expert

Accessibility and Color Contrast for Icons

🤔Before reading on: do you think icon color alone is enough for accessibility? Commit to your answer.

Concept: Good icon design includes accessibility considerations like color contrast and ARIA labels.

Icons should have enough contrast with backgrounds to be visible to all users, including those with vision impairments. Use tools to check contrast ratios. Also, add aria-label or role="img" with descriptive text for screen readers. For example:

Result

Icons become usable and understandable for everyone, improving site inclusivity.

Knowing accessibility rules prevents common mistakes that exclude users and improves overall design quality.

Under the Hood

Bootstrap Icons are SVG or font-based icons styled with CSS. When you apply size classes like fs-1, you change the font-size property, which scales the icon because it behaves like text. Color classes change the CSS color property, which affects the icon's fill or stroke color. CSS variables allow dynamic theming by letting you override default styles without changing the icon code itself.

Why designed this way?

Bootstrap chose to make icons behave like text so they integrate seamlessly with typography and layout. Using utility classes for size and color keeps styling consistent and easy to maintain. CSS variables were added to support flexible theming and customization without complex overrides.

┌───────────────┐
│ Bootstrap Icon│
│   (SVG/Text)  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ CSS Properties│
│ - font-size   │ ← controlled by fs-* classes
│ - color       │ ← controlled by text-* classes
│ - CSS vars    │ ← custom overrides
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Rendered Icon │
│  on Webpage   │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does changing the icon's color class affect its background color? Commit to yes or no.

Common Belief: Changing the icon's color class also changes its background color automatically.

Reality: Color classes only change the icon's color (the icon's shape color), not the background behind it.

Why it matters: Assuming background changes can cause icons to blend into backgrounds or become invisible if the background color is not set separately.

Quick: Can you resize icons by changing their width and height attributes directly? Commit to yes or no.

Common Belief: You can resize Bootstrap icons by setting width and height attributes on the icon element.

Reality: Bootstrap icons are sized mainly by font-size or CSS variables; width and height attributes on SVG or tags often have no effect unless overridden by CSS.

Why it matters: Trying to resize icons with width/height attributes leads to inconsistent sizes and broken layouts.

Quick: Does using color alone make icons accessible to all users? Commit to yes or no.

Common Belief: Using bright or contrasting colors on icons is enough to make them accessible for everyone.

Reality: Color alone is not enough; icons need sufficient contrast ratios and descriptive labels for screen readers to be truly accessible.

Why it matters: Ignoring accessibility can exclude users with color blindness or screen readers, reducing usability and legal compliance.

Quick: Are CSS variables for icon colors supported in all browsers? Commit to yes or no.

Common Belief: CSS variables for icon colors work perfectly in all browsers without fallback.

Reality: Most modern browsers support CSS variables, but some older browsers do not, so fallback styles may be needed.

Why it matters: Relying solely on CSS variables without fallback can cause icons to display incorrectly in older browsers.

Expert Zone

1

Bootstrap icons inherit font-size and color from their parent elements unless overridden, which means global styles can affect icons unexpectedly.

2

Using CSS variables for theming icons allows dynamic switching of icon colors without touching HTML, which is powerful for dark mode or brand changes.

3

Combining multiple utility classes can sometimes cause conflicts or unexpected results if not ordered or scoped properly, requiring careful class management.

When NOT to use

Avoid using Bootstrap icon sizing classes when you need pixel-perfect control or animations; instead, use custom CSS or SVG manipulation. For complex color gradients or multi-color icons, use inline SVG with custom styles rather than simple color classes.

Production Patterns

In real projects, icons are often sized relative to text using fs-* classes for consistency. Color classes are combined with contextual classes (like buttons or alerts) to match UI states. CSS variables are used in theming systems to switch icon colors dynamically for light/dark modes or branding. Accessibility attributes are added systematically for screen reader support.

Connections

Typography in Web Design

Bootstrap icons behave like text elements, so icon sizing and color follow typography rules.

Understanding typography helps you predict how icon size and color will respond to font-size and color changes in CSS.

Color Theory

Choosing icon colors involves principles of color contrast and harmony from color theory.

Knowing color theory helps you pick icon colors that stand out and are pleasant, improving user experience and accessibility.

Traffic Signage Design

Both icon design and traffic signs rely on size and color to communicate quickly and clearly.

Studying traffic signage shows why icon size and color must be balanced for immediate recognition and safety.

Common Pitfalls

#1 Using fixed pixel sizes for icons instead of Bootstrap's font-size classes.

Wrong approach:

Correct approach:

Root cause: Not understanding that Bootstrap's sizing utilities provide responsive, consistent sizing that adapts better than fixed pixels.

#2 Changing icon color by setting background-color instead of text color.

Wrong approach:

Correct approach:

Root cause: Confusing icon color (the icon's shape) with background color, leading to invisible or poorly visible icons.

#3 Forgetting to add accessibility labels to icons that convey meaning.

Wrong approach:

Correct approach:

Root cause: Not knowing that screen readers need descriptive labels to understand icons, causing accessibility issues.

Key Takeaways

Bootstrap icons are styled like text, so their size and color are controlled by font-size and color CSS properties.

Using Bootstrap's utility classes for size (fs-*) and color (text-*) makes icon styling easy, consistent, and responsive.

Combining multiple classes on icons allows flexible and quick customization without writing extra CSS.

Accessibility is crucial: icons need good color contrast and descriptive labels for all users to understand them.

Advanced customization with CSS variables enables theming and fine control but requires fallback consideration for older browsers.

Practice

1. Which Bootstrap class controls the size of an icon?

easy

A. fs-* classes

B. icon-size-* classes

C. size-icon-* classes

D. icon-fs-* classes

Solution

1. Step 1: Understand Bootstrap icon sizing

   Bootstrap uses fs-* classes to control font size, which affects icon size.

2. Step 2: Identify correct class pattern

   The correct pattern is fs-*, where * is a number like 1, 2, 3, etc.

3. Final Answer:

   <code>fs-*</code> classes -> Option A

4. Quick Check:

   Icon size = fs-* classes [OK]

Hint: Remember: fs-* means font size in Bootstrap [OK]

Common Mistakes:

• Confusing icon size classes with color classes
• Using non-existent class names like icon-size-*
• Thinking size is controlled by icon-fs-*

2. Which class would you use to make a Bootstrap icon have a medium font size?

easy

A. fs-6

B. fs-1

C. fs-3

D. fs-0

Solution

1. Step 1: Recall Bootstrap font size scale

   Bootstrap font sizes range from fs-1 (largest) to fs-6 (smallest).

2. Step 2: Identify medium size

   fs-3 is roughly in the middle, so it represents medium size.

3. Final Answer:

   fs-3 -> Option C

4. Quick Check:

   Medium size = fs-3 [OK]

Hint: fs-1 is largest, fs-6 smallest; middle is fs-3 [OK]

Common Mistakes:

• Choosing fs-1 thinking it's medium
• Using fs-0 which does not exist
• Confusing fs-6 as medium size

3. What color will the icon have with this class: text-danger?

medium

A. Red

B. Blue

C. Green

D. Gray

Solution

1. Step 1: Understand Bootstrap text color classes

   Bootstrap uses semantic color classes like text-danger for red color.

2. Step 2: Match class to color

   text-danger applies a red color to text or icons.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   text-danger = red color [OK]

Hint: Danger means red in Bootstrap colors [OK]

Common Mistakes:

• Thinking text-danger is blue
• Confusing text-success with text-danger
• Assuming text-danger is gray

4. You want a large green icon but your code is: <i class='bi bi-check fs-1 text-successs'></i>. What is the problem?

medium

A. fs-1 is not a valid size class

B. Wrong icon name bi-check

C. Missing aria-label attribute

D. Misspelled color class text-successs

Solution

1. Step 1: Check class names for typos

   The color class text-successs has an extra 's' and is invalid.

2. Step 2: Confirm other classes

   bi-check is a valid icon, fs-1 is valid for large size, aria-label is optional but recommended.

3. Final Answer:

   Misspelled color class <code>text-successs</code> -> Option D

4. Quick Check:

   Check spelling of color classes [OK]

Hint: Check spelling of Bootstrap classes carefully [OK]

Common Mistakes:

• Ignoring typos in class names
• Assuming fs-1 is invalid
• Forgetting aria-label but thinking it's an error

5. You want to create a blue icon with medium size and accessible label "Info icon". Which code is correct?

hard

A. <i class='bi bi-info-circle fs-5 text-info' aria-label='Info icon'></i>

B. <i class='bi bi-info-circle fs-3 text-primary' aria-label='Info icon'></i>

C. <i class='bi bi-info fs-3 text-primary' aria-hidden='true'></i>

D. <i class='bi-info-circle fs-3 text-primary' aria-label='Info icon'></i>

Solution

1. Step 1: Check icon name and size

   bi-info-circle is correct icon name; fs-3 is medium size.

2. Step 2: Verify color and accessibility

   text-primary is blue color; aria-label='Info icon' provides accessible label.

3. Step 3: Review other options

   <i class='bi bi-info-circle fs-5 text-info' aria-label='Info icon'></i> uses fs-5 (small size) and text-info (lighter blue). <i class='bi bi-info fs-3 text-primary' aria-hidden='true'></i> misses accessible label and uses aria-hidden. <i class='bi-info-circle fs-3 text-primary' aria-label='Info icon'></i> misses bi class prefix.

4. Final Answer:

   <i class='bi bi-info-circle fs-3 text-primary' aria-label='Info icon'></i> -> Option B

5. Quick Check:

   Correct icon, size, color, and aria-label [OK]

Hint: Use bi + fs-* + text-* + aria-label for accessible icons [OK]

Common Mistakes:

• Missing bi prefix on icon class
• Using wrong size or color classes
• Forgetting aria-label for accessibility