IBM-Design / icons

IBM Design Language Icons
http://www.ibm.com/design/language/resources/icon-library
Other
194 stars 41 forks source link

Build Status

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

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

Creative Commons 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.