Skip to main content
Iconography uses images and symbols to represent an object visually. They communicate a message and should be distinct and informative. Icons should be used sparingly throughout the product to provide clarity and reduce cognitive load on users.


You can find the source file for the icon library within the Carbon Design Kit.

Visual usage


UI icons are 16px.

While most icons occupy a square artboard, some icons may occupy a rectangular artboard where only the width or height of the icons is 16px. Icons should only be used at their original sizes.


All icons should be on a transparent background and with the artboard boundaries at the edges of the icon. At least one of the edges should be at the standard measurement of 24px or 16px.

icon usage


When creating icons, do not add internal padding with Sketch or Illustrator. If the icon needs padding, developers can add this with CSS.

When using icons, all touch targets need to be 44px or higher. With that said, a developer can add padding to a touch target with CSS to meet the 44px requirement.

icon padding


Interactive UI icons need to pass the same color contrast ratio as typography at a 4.5:1 ratio. UI icons are always a solid color. The color of the icon should depend on the importance of the icon's action.

Primary action$brand-01
Primary action:hover$hover-primary
Secondary action$ui-05
Secondary action:hover$hover-secondary

Exception: There is an exception to both the brand-01 and UI color rules. Certain icons, such as status or notification icons, can inherit their parent color. For example, a warning icon is yellow because warning notifications are yellow.


Icons of the same size should have the same visual weight. One icon should not look heavier or lighter than another icon of the same size. Most UI Icons are drawn with a two pixel stroke.

Make sure the 2px stroke does not change when resizing icons because it causes icons to look uneven. When scaling icons you should always start each icon at the same base size (preferably the default of 24px).

Glyphs or 16 pixel icons, should always be a filled icon. This adds visual weight to the icon, allowing it to maintain its proper emphasis and stay legible. Fine stroke weights can disappear or break at the glyph size.

Pixel grid

When drawing or re-sizing icons make sure the vector always aligns to the base pixel grid. This ensures pixel clarity and crispness on all screen ratios. The x and y coordinates of icons should never contain decimals.

Developer usage


  • Install carbon-icons
Full installation details in Carbon icons GitHub repo.

Use the SVG sprite (carbon-icons.svg) by serving it as a static asset. Then reference the SVG icon you want to display using a path to the SVG sprite file. To use SVG sprite files, they must be distributed through a web server and while using svgxuse.

<!-- From static assets --> <svg> <use xlink:href="/path_to_static-assets/carbon-icons.svg#icon_name"></use> </svg>

path_to_static-assets is the path to your static assets where carbon-icons.svg is located.

icon_name is the icon name, which will display the corresponding icon. Refer to the iconography library page for a full list of icon names.


You can override size and color with CSS.

<svg class="icon"> <use xlink:href="/path_to_static-assets/carbon-icons.svg#icon_name"></use> </svg>
.icon { width: 24px; height: 24px; fill: red; }

All icons in the library are standardized so that they do not include stroke or internal spacing (padding).

Inline SVG

If you're unable to use the recommended SVG sprite or svgxuse, you can inline SVG directly into your HTML.

Visit carbon-icons and browse the svg folder for any icons you want to use. (Remember, svg subfolders contain deprecated icons. Don't use these).

Main files

Carbon icons ship with two main SVG files that contain different sets of external SVG sprite files:

FilenameDescriptionSupported versions
carbon-icons.svgContains current icons (consolidated subset of legacy icons used in IBM Bluemix)3.x and newer
carbon-icons.jsonJSON file created from carbon-icons.svg, used in Carbon3.x and newer
carbon-icons.jsJS module created from carbon-icons.svg, used in Icon React Component in carbon-components-react3.x and newer
sprite.svgSVG sprite contains legacy icons1.x, 2.x and 3.x
icons.jsonlegacy JSON file created from sprite.svg1.x, 2.x and 3.x
legacy-icons.jsJS module created from sprite.svg3.x only


For screen reader accessibility, provide a context-rich title for the SVG using <title> element.

<svg> <title>Add a new service</title> <use xlink:href="/carbon-icons/dist/icon--add--glyph"></use> </svg>

If support for older browsers is needed, use aria-labelledby attribute to reference the <title> element using an id. The <title> element will be read by the screen reader to the user so it should describe its purpose. Make sure that you do not duplicate this id.

<svg aria-labelledby="add"> <title id="add">Add a new service</title> <use xlink:href="/carbon-icons/dist/icon--add"></use> </svg>

For more details on accessibility, see the following resources: