skills.rest
CoRLab-Tech
CoRLab-TechOFFICIAL
Explore all skills by this author →
GitHub

carbon-icons

Guide Carbon Design System icon imports, sizing, color, alignment, and touch targets in React.

1|Updated Jan 30, 2026
Search Tags:#frontend#react#design system#icons#ui components#carbon design
One-click install
npx skills add https://github.com/CoRLab-Tech/skills --skill carbon-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: carbon-icons
Source: https://github.com/CoRLab-Tech/skills/tree/main/carbon-icons
Command: npx skills add https://github.com/CoRLab-Tech/skills --skill carbon-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about carbon-icons

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

FAQPage Schema
How do I use Carbon Design System icons in a React application?▼

To use Carbon Design System icons in React, import specific icons from `@carbon/icons-react` and render them as components. This Skill provides guidelines for correct imports, sizing, and color to ensure adherence to design standards.

What are the rules for sizing and color matching Carbon icons?▼

Carbon icons require specific sizing and color rules to match text and maintain accessibility. This Skill defines these standards, ensuring your UI components have proper visual alignment and accessible color contrast.

How do I ensure proper alignment and touch targets for UI icons?▼

Proper alignment and adequate touch target sizes for interactive UI icons are achieved by following Carbon Design System guidelines. This Skill provides the rules to ensure icons in components like search bars are correctly spaced and interactive.

Do I need to manually create SVGs when building UI components with Carbon icons?▼

No, you do not need to manually create SVGs. This Skill prevents manual SVG creation by providing guidelines to import and use existing icons from `@carbon/icons-react`, ensuring consistent design standards.

Can I use this Skill for icon usage in V-Shield Design System?▼

Yes, this Skill adheres to Carbon Design System icon usage rules while also incorporating V-Shield Design System labeling. It guides icon integration for React applications using either system.

What is the best way to import a search icon in a React UI component?▼

The best way to import a search icon is from `@carbon/icons-react`. This Skill guides you on selecting the right icon, importing it correctly, and rendering it with the appropriate size, such as 20, according to Carbon guidelines.

Related Skills

Explore More Design & Creative Skills→
patternflypatternfly
10

figma-icon-finder

Identify PatternFly icons in Figma designs and generate React import statements.

Official
Intermediate
remiconnessonremiconnesson

ui-design

Identify accessibility, layout, typography, color, form, and motion issues in HTML and CSS.

Community
Advanced
lyzno1lyzno1
1

frontend-design

Create responsive, accessible frontend interfaces with HTML, CSS, and JavaScript.

Community
Basic
OreStudioOreStudio
25

icon-guidelines

Standardize ORE Studio UI icons using Fluent UI System Icons conventions.

Official
Basic