Bootstrap Icons
Integrates the official Bootstrap Icons library using various implementation methods, styling techniques, and accessibility standards.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Accessibility best practices for both informative and decorative icons
- Detailed styling techniques for responsive sizing, coloring, and alignment
- Quick-reference categorized icon lists for rapid discovery
- Multi-method installation guidance covering CDN, npm, and Composer
- Implementation patterns for icon fonts, embedded SVGs, and CSS masks
Use cases
- Ensuring icon accessibility and proper UI scaling for screen readers
- Adding professional iconography to Bootstrap-based web applications
- Optimizing icon delivery for specific environments like email templates or PHP frameworks
FAQ
What does the Bootstrap Icons skill do for Claude Code?
This skill provides Claude Code with specialized knowledge to help you select, install, and implement over 2,000 official Bootstrap icons. It enables Claude to generate precise code for various implementation methods, from icon fonts to embedded SVGs.
How does this skill improve my frontend development workflow?
It eliminates the need to manually browse documentation. Claude can instantly provide the correct markup for specific icons, suggest the right CSS utility classes for sizing and coloring, and ensure your icons align perfectly with your text.
Which installation methods does this skill support?
The skill covers all major integration paths including CDN links for rapid prototyping, npm for modern build tools, Composer for PHP/Laravel projects, and manual SVG sprite or file downloads.
Can this skill help with web accessibility (A11y)?
Yes. The skill includes best practices for accessibility, helping Claude generate code that correctly uses ARIA labels for informative icons and aria-hidden attributes for purely decorative icons.
Does it support advanced styling like CSS masks?
Absolutely. Beyond basic font-size and color utilities, the skill provides implementation patterns for advanced techniques like CSS masks, which allow icons to inherit 'currentColor' while being loaded as external SVGs.
Related skills
React Component Generator
Generates production-ready React components using TypeScript, Tailwind CSS, and Zustand state management following industry best practices.
Design Tools11212 ptsUI Analyzer
Transforms UI design screenshots into production-ready React components with TypeScript and Tailwind CSS.
Design Tools11212 ptsBootstrap Components
Streamlines the implementation and troubleshooting of Bootstrap 5.3.8 UI components with expert guidance on styling, behavior, and accessibility.
Design Tools112 pts