skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

boxicons

Select Boxicons icons with bx-, bxs-, and bxl- prefixes for UI design systems.

Updated Aug 23, 2026
Search Tags:#frontend#icons#ui-design#iconography#boxicons#brand-logos
One-click install
npx skills add https://github.com/leonardoacosta/central-claude --skill boxicons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: boxicons
Source: https://github.com/leonardoacosta/central-claude/tree/main/skills/boxicons
Command: npx skills add https://github.com/leonardoacosta/central-claude --skill boxicons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Boxicons provides a ready-to-use icon library that covers brand logos and generic icons, helping design systems stay consistent without sourcing assets from multiple places.

Core Features & Use Cases

  • 1500+ icons across Regular outline, Solid filled, and Logos versions.
  • Brand logos coverage with prefixes bx- (regular), bxs-, and bxl- for logos.
  • Easy integration with CSS class usage or web components to speed UI development.
  • Use Case: When a project already uses Boxicons or needs service logos that Phosphor doesn't ship.

Quick Start

Import the Boxicons stylesheet and start using icons with the bx-, bxs-, or bxl- prefixes.

Frequently Asked Questions about boxicons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add brand logos and UI icons to my web app using Boxicons?▼

To use Boxicons, import the stylesheet and apply CSS classes with bx- for regular outline icons, bxs- for solid filled icons, and bxl- for brand logos. This provides immediate access to over 1500 icons for UI development and rapid prototyping.

When should I use Boxicons instead of Phosphor for my design system?▼

You should use Boxicons instead of Phosphor when your project requires specific brand logos or service icons that Phosphor does not ship. Boxicons provides dedicated brand logo coverage while ensuring accessibility and consistency across your web apps and marketing sites.

Does Boxicons support solid and regular icon variations for dashboard theming?▼

Yes, Boxicons supports solid and regular variations for dashboard theming through the bxs- prefix for solid filled icons and the bx- prefix for regular outline icons. This allows you to maintain visual hierarchy and consistency across different UI components.

What is the best way to integrate Boxicons into a frontend project for rapid prototyping?▼

The best way to integrate Boxicons for rapid prototyping is by importing the Boxicons stylesheet and using web components or CSS class usage. This approach allows you to quickly add UI icons and brand logos without sourcing assets from multiple external places.

Can I use Boxicons with web components for marketing site iconography?▼

Yes, you can use Boxicons with web components for marketing site iconography. The library supports easy integration through CSS class usage or web components, allowing you to quickly apply bx-, bxs-, and bxl- prefixes for consistent visual design.

Related Skills

Explore More Design & Creative Skills→
wfvuewfvue
3

tailwindcss

Apply Tailwind CSS v4 utilities with Vite plugin integration for responsive and dark mode styling.

Community
Intermediate
kaynetikkaynetik
1

svg-gen

Generate accessible, optimized SVG artwork for icons and logos.

Community
Intermediate
trusted-americantrusted-american

fontawesome

Register FontAwesome 7 icons and render them with the A3 Icon component.

Official
Intermediate
cfardevcfardev

react-icons

Render SVG icons in React/Next.js by importing from react-icons.

Community
Basic