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 --saveUsage
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$ gulpContributing
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.