Back to features

Bootstrap Icons

Integrates Bootstrap Icons seamlessly into your Phoenix application with Tailwind CSS support. This feature provides access to over 1,800+ Bootstrap Icons through a custom Tailwind plugin, allowing you to use icons as CSS classes without additional JavaScript dependencies.

Key Benefits

  • Zero Runtime Overhead - Icons are rendered as pure CSS using SVG data URIs
  • Tailwind Integration - Use Bootstrap Icons as utility classes alongside your existing Tailwind workflow
  • Extensive Icon Library - Access to the complete Bootstrap Icons collection with consistent naming
  • Phoenix Component Ready - Extends the existing icon/1 component to support Bootstrap Icons out of the box

Implementation Details

The feature adds the twbs/icons dependency as a sparse checkout to minimize repository size, then configures a custom Tailwind plugin that reads SVG files and generates CSS classes. Icons are prefixed with bi- to distinguish them from other icon sets. The implementation extends Phoenix's core components to handle Bootstrap Icons through the existing icon/1 function.

Usage Example

# In your templates or components
<.icon name="bi-house" class="w-5 h-5 text-blue-500" />
<.icon name="bi-envelope-fill" class="w-4 h-4" />

# Or use directly as Tailwind classes
<span class="bi-gear w-6 h-6" />

Configuration

After installation, Bootstrap Icons work immediately with your existing Phoenix components. The Tailwind plugin automatically discovers all available icons from the dependency and generates corresponding CSS classes during your asset build process.