Use the Icons from the IBM Design Language in your project.
The IBM Design icons can be installed via Bower or NPM:
$ bower install ibm-icons --save$ npm install ibm-design-icons --saveUse 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.
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.
- 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.
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.
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.
