Bootstrap Icons - UI & Accessibility Patterns

Buttons with Icons

Combine icons with buttons for visual clarity. Use spacing utilities (.me-1, .ms-1) between icons and text.

Icon Before Text

Icon After Text

Icon-Only Buttons

Icon-only buttons must have aria-label for screen readers. Icons use aria-hidden="true" to avoid redundant announcements.

Navigation with Icons

Icons enhance navigation by providing visual cues. Keep icons decorative when text is present.

Nav Pills with Icons

Sidebar Navigation

Breadcrumb with Home Icon

Lists with Icons

Use icons as visual markers in lists. Icons should be decorative when the list item text conveys meaning.

Feature List with Checkmarks

Status List (Included/Excluded)

Contact Information List

Social Icons

Social icon links require accessible names since they contain no visible text. Use aria-label on the link element.

Horizontal Social Bar

Footer Social Pattern

Icon Badges

Position badges on icons for notifications and counts. Include visually-hidden text for screen readers.

Notification Badges

Status Indicator Badges

Accessibility Patterns

Proper accessibility ensures icons are announced correctly by screen readers. The approach depends on whether the icon conveys meaning or is decorative.

Meaningful Icons (Convey Information)

When icons convey meaning not available in text, provide accessible text.

Decorative Icons (Hide from Screen Readers)

Icons that don't add meaning should be hidden with aria-hidden="true".

Icon with Visible Text

When visible text describes the action, hide the icon from screen readers to avoid redundant announcements.