Weave Code
Bootstrap Icons Laravel Package
twbs/bootstrap-icons
Official open-source Bootstrap SVG icon library with 2,000+ icons. Install via npm or Composer and use by embedding SVGs, referencing with , using the sprite, or via CSS. Explore the full icon set and usage docs at icons.getbootstrap.com.
Official open source SVG icon library for Bootstrap
Frequently asked questions about Bootstrap Icons
- How do I install Bootstrap Icons in a Laravel project via Composer?
- Run `composer require twbs/bootstrap-icons` to install the package. The SVGs are static assets, so you’ll need to manually copy them to your `public` folder or integrate them via Laravel Mix/Vite. Check the [usage docs](https://icons.getbootstrap.com/) for pipeline-specific instructions.
- Can I use Bootstrap Icons in Laravel Blade templates?
- Yes. Embed icons directly in Blade using the `bi-*` classes (e.g., `<i class="bi bi-cart"></i>`) or include the SVG sprite via `<img>` tags. For reusable components, create a Blade partial or use a helper function to generate dynamic icon markup.
- What Laravel versions does this package support?
- Bootstrap Icons is a frontend asset library with no Laravel-specific dependencies. It works with any Laravel version (5.5+) as long as you handle static assets via Mix, Vite, or manual file copying. No backend logic is required.
- How do I integrate Bootstrap Icons with Laravel Mix/Vite?
- Use Mix’s `copy` method to publish the icons to `public/assets`. For example, add `mix.copy('node_modules/bootstrap-icons/font', 'public/assets/icons/font');` to your `webpack.mix.js`. Then reference them in your CSS or Blade files via `{{ asset('assets/icons/...') }}`.
- Are there performance concerns with using SVG icons in Laravel?
- The SVG sprite is optimized (~10KB total) and won’t bloat your critical rendering path. For dynamic icons, consider lazy-loading or inlining critical SVGs. Test with Lighthouse to ensure performance meets your app’s needs.
- How do I dynamically switch icons based on user roles in Laravel?
- Use Laravel Blade conditionals or JavaScript (e.g., Alpine.js) to toggle icon classes. For example: `@if(auth()->user()->is_admin) <i class="bi bi-shield-check"></i> @else <i class="bi bi-eye"></i> @endif`. For complex logic, create a Blade component or helper.
- Does Bootstrap Icons work with Tailwind CSS in Laravel?
- Yes. Bootstrap Icons integrate seamlessly with Tailwind by using the `bi-*` classes alongside Tailwind’s utility classes (e.g., `<i class="bi bi-cart text-blue-500"></i>`). No additional configuration is needed beyond including the icon CSS or SVG sprite.
- What’s the best way to cache Bootstrap Icons in Laravel?
- Cache the SVG sprite or icon font files in `storage/app/public` and symlink them to `public`. Use Laravel’s `Cache::remember` for dynamic icon generation or leverage browser caching with `Cache-Control` headers in your `.htaccess` or Nginx config.
- Are there alternatives to Bootstrap Icons for Laravel projects?
- Yes. Consider **Font Awesome** (Composer: `fortawesome/font-awesome`), **Heroicons** (GitHub: `heroicons`), or **Tabler Icons** (npm: `tabler-icons`). Each has trade-offs: Font Awesome offers more icons but larger file sizes, while Heroicons are MIT-licensed and lightweight. Choose based on your design system needs.
- How do I update Bootstrap Icons to the latest version in Laravel?
- Run `composer update twbs/bootstrap-icons` to update the package. Manually replace files in `public/assets` or regenerate them via Laravel Mix. Test your app thoroughly, as icon classes or SVG structure may change between versions. Check the [release notes](https://github.com/twbs/icons/releases) for breaking changes.
Weaver
How can I help you explore Laravel packages today?