Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
194 lines (131 sloc) 6.21 KB
label title tabs
Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
Iconography
Usage
Library
Contribute

Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.

Resources



Designing with icons

Sizing

Carbon components typically use icons on 16px artboards. Icons on 20px, 24px, and 32px artboards can also be used within the UI. Be sure icon size is consistent throughout your product.

icon sizing

icon alignment

proper sizing

improper sizing

Touch targets

All touch targets for interactive icons need to be 44px or larger. Developers can add padding to a touch target with CSS to meet the 44px requirement.

touch target padding

Color

Icons are always a solid, monochromatic color and need to pass the same color contrast ratio as typography (4.5:1). The color of the icon should reflect the importance of the icon’s action which should always be to help guide a user. For more information on color, see the Color guidelines.

It's also important to note that Carbon v10 icons themselves do not have interaction states, only their backgrounds do.

proper alignment

improper alignment

Alignment

When used next to text, icons should be center-aligned.

proper alignment

improper alignment

Developing with icons

SVG Icons

Requirements:

Install carbon-icons.

Full installation details can be found in the Carbon icons GitHub repo.

Main files

carbon-icons ships with two main SVG files:

Filename Description Supported versions
carbon-icons.svg Contains current icons (consolidated subset of legacy icons used in IBM Bluemix) 3.x & newer
carbon-icons.json JSON file created from carbon-icons.svg, used in Carbon 3.x & newer
carbon-icons.js JS module created from carbon-icons.svg, used in Icon React Component in carbon-components-react 3.x & newer
icons.json legacy JSON file created from sprite.svg 1.x,2.x&3.x
legacy-icons.js JS module created from sprite.svg 3.x only

Accessibility

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 the 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:


You can’t perform that action at this time.