Icons

Icon set and usage guidelines.

Why Carbon?

Consistent visual weight — all icons share the same stroke width and optical sizing.
Multiple sizes — 16, 20, 24, and 32px variants available for every icon.
Accessible by default — each icon component accepts aria-label and title props.
Tree-shakeable — only the icons you import are included in the bundle.

Usage

Import icons directly from @carbon/icons-react:

tsx

1 import { Add, Search, Close } from "@carbon/icons-react"
2  
3 function Toolbar() {
4   return (
5     <div className="flex gap-2">
6       <button aria-label="Add item"><Add size={20} /></button>
7       <button aria-label="Search"><Search size={20} /></button>
8       <button aria-label="Close"><Close size={20} /></button>
9     </div>
10   )
11 }

11 lines of tsx code

Size conventions

Context	Size	Example
Inline with text	16px	Breadcrumb chevrons, status indicators
Toolbar buttons	20px	Action bar icons
Standalone buttons	24px	Navigation icons, card actions
Hero or empty states	32px	Illustration-style usage

Always pair icons with visible text labels or aria-label attributes for accessibility. Avoid using icons as the sole means of conveying meaning.

1	import { Add, Search, Close } from "@carbon/icons-react"
2
3	function Toolbar() {
4	return (
5	<div className="flex gap-2">
6	<button aria-label="Add item"><Add size={20} /></button>
7	<button aria-label="Search"><Search size={20} /></button>
8	<button aria-label="Close"><Close size={20} /></button>
9	</div>
10	)
11	}