IBM Design Icons

Use the Icons from the IBM Design Language in your project.

Installation

The IBM Design icons can be installed via Bower or NPM:

$ bower install ibm-icons --save

$ npm install ibm-design-icons --save

Usage

Intent

Use an icon to bridge recognition where verbal language cannot. The more icons you use, the less attention they draw. Consider whether adding an icon to your interface increases usability and clarity. Use them when space requires it, to communicate status, or to help differentiate objects in a list. Generally, icons represent objects, tools, actions or desired results.

Sizing

Glyphs are distinguished by their solid shape and knocked-out details. Their recommended size is 24 x 24 pixels, the smallest recommended size for touch interfaces. If you use a smaller size, please use the style of the solid shape and knocked out details.

Icons accommodate for limited space, but are sized for interactive, touch-friendly experiences. They can indicate change, provide visual cues for the eye and increase recognition. We recommend sizing icons at 32 x 32, 64 x 64, and/or 128 x 128 pixels.

Padding

• Square icons should have 3px padding for small icons, 6px for medium icons, and 9px for large icons.

• Circular icons should have 2px padding for small icons, 4px for medium icons, and 8px for large icons.

• Rectangular icons should have 1px padding for small icons, 2px for medium icons, and 3px for large icons.


Exporting

All of your icons should have a common naming convention. Export icons as .SVG files and build a .PNG fallback. If you use icon fonts that uses Unicode characters instead of ligatures, prevent screen readers from reading the Unicode and apply ARIA labels. Create icons in multiple sizes to support a variety of screen densities. Before exporting, optimize file sizes and remove any unnecessary metadata.

To automatically export the files, you must have Adobe Illustrator CC installed and be on Mac OSX.

$ npm install
$ sudo npm install -g gulp
$ gulp

Contributing

Please read the contributing guide.

N.B. If you make updates to the exporting scripts, please do not commit any changes to the dist folder. That will be hanlded on new releases.

License

IBM Design Icons by International Business Machines Corporation is licensed under a Creative Commons Attribution 4.0 International License.
Based on a work at https://github.com/IBM-Design/icons.