Skills
.Work. You
Rest

carbon-icons

Official

Use Carbon Design System icons.

Design & Creative#frontend#react#design system#icons#ui components#carbon design
AuthorCoRLab-Tech
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill ensures consistent and correct usage of Carbon Design System icons within React applications, preventing manual SVG creation and enforcing design standards.

Core Features & Use Cases

  • Icon Integration: Provides guidance on importing and using icons from @carbon/icons-react.
  • Sizing & Color: Defines rules for icon sizing and color to match text and maintain accessibility.
  • Alignment & Touch Targets: Ensures proper visual alignment and adequate touch target sizes for interactive icons.
  • Use Case: When building a UI component that requires an icon, like a search bar or a dropdown menu, this Skill guides you on selecting the right icon, importing it correctly, and styling it according to Carbon Design System guidelines.

Quick Start

Import the Search icon from @carbon/icons-react and render it with a size of 20.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: carbon-icons
Download link: https://github.com/CoRLab-Tech/skills/archive/main.zip#carbon-icons

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.