ibm-design/icons

IBM Design Language Icons

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.

icons's Issues

CC license on this page doesn't match the license file in the repo

http://www.ibm.com/design/language/resources/icon-library (3.0)

https://github.com/IBM-Design/icons/blob/master/LICENSE.md (4.0)

dist naming inconsistancies

The microphone-recording icon only exists as a png.

down-to-bottom.svg isn't conforming to naming convention

All svg icons with viewbox 32x32 seem to end with _32.svg except for this one:
https://github.com/IBM-Design/icons/blob/master/svg/action-based/down-to-bottom.svg

Submitting glpyh icon for opening something in a new window

Designed in the Watson style (i.e., thin lines, curved edges).

I could also make a version that is more traditionally IDL style (sharp edges, thicker lines) and non-glyph versions if there's interest.

Thought I'd just go ahead and submit. :)
new_window.svg.zip

Evaluate usefulness of various icon sizes

Currently there are 5 different icon sizes for every single icon, 16px, 24px, 32px, 64px, and 128px. In #18 there started a conversation about the usefulness of every step along the way and finding a middle ground between having super legible icons and the general maintainability of the project.

Submitting glyphs for get-information icon

I've created 16px/24px glyphs for the info icon. Submitting for review.

Saved icon file out as a PDF since github won't let me upload SVGs / AIs.

Happy to answer any questions or make any revisions.

get-information icon.pdf

Requesting addition of notification (bell) icon.

Note: This have been approved by @hchughes already. @seejamescode can we create a PR and merge, all files have been included in the zipped folder below.

`npm` Package fails to install for Node versions 6 and up

When installing the npm module, using yarn or the npm client, the package fails to install if the Node.js version you're using is >5.

For example:

$ yarn add ibm-design-icons
yarn add v0.16.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^5.1.0".
error Found incompatible module

As a result, the module isn't installed in node_modules and is unable to be used.

Inconsistencies in SVG markup

SVGs unconsistently have background-icon-guides layers <g> or nothing.

See for example:

• https://raw.githubusercontent.com/IBM-Design/icons/master/svg/object-based/activity_128.svg
• https://raw.githubusercontent.com/IBM-Design/icons/master/svg/glyphs/chat_24.svg

Link on main page is broken...

Calendar icon could be more consistent between sizes and more consistent with other icons

I've noticed that the IBM Design Language icon for "calender" has a few issues:

1. The calendar icons are very different shapes between the three main sizes (changes from 16px to 24px, and then again at 32px).
2. The "2" used at larger sizes doesn't make much sense during most days of the month, as would a day-by-day calendar.

This icon set was downloaded on Aug 15, 2016, from http://www.ibm.com/design/language/resources/icon-library/

Request: In Progress icon

We need an icon indicating a test is "in progress." It should be a static icon as opposed to a loading spinner. The IDL icons for "reset" and "insert," etc. also don't work, as we use the "reset" icon on the same page for its correct meaning.

Here's what I had in mind:

Thanks!

Android and iOS app icons templates

Wondering if we have these somewhere and just aren't linking them.
https://www.ibm.com/design/language/resources/

Create a script to automatically extract svgs/pngs from .ai files

Theres an example here. We'd need to update our illustrator file's art boards to use it which wouldn't be terrible. Or we need to create a new script to do it for us.

Svgs/Glyphs should have separate art boards

The .ai files currently have icons and glyphs on the same art board. They should be split apart onto their own artboards so they can be easily exported

This enables auto exporting from a script #16

icon label for "insecure" icon vs "unsecure"

small label tweak...
change label for icon in 'object' set, current label "insecure" change to "unsecure"

Script to combine artboards into a single file

By separating all of the icons into separate files, designers have lost the ability to see the context for all of the icons. We need an export script that will combine all of the individual files into a single art board.

Icons should be made with compound paths

Turning an icon in to a compound path affords a handful of benefits. A group can be accidentally ungrouped pretty easily in a working session, while a compound path is a little more resilient.

We also save a few bits when exporting a compound path SVG vs multiple elements. As an example, the zoom icon as multiple elements is 429 bytes:

<g>
    <path d="M44,0C19.7,0,0,19.7,0,44c0,24.3,19.7,44,44,44c24.3,0,44-19.7,44-44C88,19.7,68.3,0,44,0z M44,84C21.9,84,4,66.1,4,44
        S21.9,4,44,4c22.1,0,40,17.9,40,40S66.1,84,44,84z"/>
    <rect x="91.5" y="80.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -41.4214 100)" width="17" height="39.6"/>
    <circle cx="80" cy="80" r="4"/>
    <polygon points="48,20 40,20 40,40 20,40 20,48 40,48 40,68 48,68 48,48 68,48 68,40 48,40    "/>
</g>

vs as a compound path at 316 bytes:

<path d="M44,0C19.7,0,0,19.7,0,44c0,24.3,19.7,44,44,44c24.3,0,44-19.7,44-44C88,19.7,68.3,0,44,0z M44,84C21.9,84,4,66.1,4,44
    S21.9,4,44,4c22.1,0,40,17.9,40,40S66.1,84,44,84z M120,108l-12,12L80,92l12-12L120,108z M80,84c-2.2,0-4-1.8-4-4s1.8-4,4-4
    s4,1.8,4,4S82.2,84,80,84z M48,40h20v8H48v20h-8V48H20v-8h20V20h8V40z"/>

IBM Design Language Glyphs

The PNG files I've uploaded need to be added to the IBM Design Language library. I will also create a separate issue to add the SVG's and replace the .AI files shortly. The glyph section should also now be broken out by three separate sections of action, formatting and object based glyphs, just like the icons.

Please roll a release with updated icons

I think its about time for a 2.0.0 with all the renames

interact icon

Quite often when explaining interactions in a concept figure an indicator for where humans can intervene is super helpful. Something similar like the 'hand' icon (appearing when hovering a link on Mac) would be a useful add-on to the icon library.

Computer

Laptop most likely.

svg icons with circles (wrapped or solid) seem blurry on retina displays

This is strange because svgs are supposed to fix this problem.

I think its because the circles around the icons are made with a element instead of a which they should be so the browser can figure out the most optimal way to layout the pixels rather than specifying them exactly

https://github.com/IBM-Design/icons/blob/master/svg/action-based/add-new_32.svg?short_path=5b81d52#L8 Add new icons "circle"

^ example. Visible pixels on my thunderbolt display

Icon set generator

e.g. https://poly-icon.appspot.com/

Deploy automatically on release

There should be a deploy hook on a release to publish to bower and npm.

Make icons easier to consume with a dist folder

Or something similar. In its current state the svgs aren't the easiest to consume. It would be great to have some kind of dist that put the svgs into a single folder (hopefully) and already minified. We could create various sprite sheets/icon fonts of all the icons to be easily consumable as well. Would you take a PR for this?

Request: Locate me icon

Request: a "locate me" icon, for when something like this is triggered manually:

Several options for glyphs:

• https://www.ibm.com/design/language/resources/icon-library/ (search for compass)
• Location arrow, map drop marker, labeled button:
  http://ux.stackexchange.com/questions/48677/pattern-for-geolocation

Save_16.svg inner circle does not inherit fill colour

When applying a fill to the save_16.svg icon, the inner circle does not inherit the desired colour.

[Submission] Sort Icon

Noticed that we don't have a dedicated icon for sorting. We've had a 16px variant that we've used on our team for a while. Used the icon builder template to build out the rest of the sizes. Figured this is something other products could benefit from as well.

Missing SVGs for download icon

I can't see files for download_16.svg or download_24.svg.
Are they supposed to be created?

Missing Glyphs

Object Based

• activity
• audio-file
• compressed-file
• hat
• image-file
• industry
• inventory
• list-view
• password-key
• pdf-file
• person
• presentation-file
• recommendation
• role
• satellite-dish
• tile-view
• video-file
• watch

Action Based

• configure
• download
• filter
• get-information
• run
• trash
• warn

Remove Unneeded Files

There are a number of files that aren't related to the purpose of the repo checked into the repo (e.g. system files etc).

Examples:

• https://github.com/IBM-Design/icons/blob/master/png/.DS_Store
• https://github.com/IBM-Design/icons/blob/master/png/glyphs/.DS_Store
• https://github.com/IBM-Design/icons/blob/master/svg/action-based/access-password-key_32.textClipping
• https://github.com/IBM-Design/icons/blob/master/svg/object-based/Archive.zip

We should probably clean those up. We may also want to update the .gitignore file accordingly.

Colorpicker

Some UIs are customizable in terms of theme. This would help.

Notifications

I've seen this done as a bell, as it is here on GitHub. Seems to work well. Has a dot on it when there is new activity, but I'd prefer a number. Either way.

2.0.2 Deleted some Icons and un-minified a bunch of svgs

designer: sketch files from canonical svgs

A designer's typical workflow in Sketch is to have a Sketch asset-file which contains assets, such as icons, open while they work on their prototype. They will then copy the assets from the asset-file and paste them into their prototype.

Feature: Cross-tool icons
  As a designer
  I want a cross-tool compatible IBM Design Language Icons module
  So that I can prototype with IBM icons, regardless of the design tool I choose.

  Scenario: svgs as canonical
    Given that I need to upgrade an icon in the IBM Design icons
      and that I need the new version of this icon available to other designers
      and that designers may use multiple tools in their workflow
      and that design assets need to work with multiple tools
     When a I upgrade my icon
     Then I need to create a canonical version of the upgraded icon
      and that version should be importable by Sketch
      and that version should be importable by Illustrator
      and that version should be the source file in the IBM Icons module.

  Scenario: copy svgs when prototyping
    Given that I am building a prototype in Sketch
      and that I need icons from IBM design in my prototype
      and that said icons are stored as svg files
      and that I need said icons compiled into an organized Sketch file
     When I want to use IBM icons in my prototype
     Then I need all IBM icons in a sketch file
      and I need those icons in a grid
      and I need said Sketch file to be generated using the canonical svg files.

---

Cross-tool icons

• svgs as canonical
• copy svgs when prototyping

Padding on Icons

There are a few areas where padding is a little confusing or not stated correctly. I see the section on the https://github.com/IBM-Design/icons about padding, but what is small, medium or large? Is this for illustrator file versions or coded versions?

Maybe have visual examples of these instead? OR is that paragraph meant just for people who are contributing?

Here's what I've deduced from the Illustrator documents:
16x16 - No padding
24x24 - 1px
32x32 - 1px
64x64 - 2px
128x128 - 3px

SVGs should be packaged with no fill color

Icons in the .AI files right now have a black fill. when an SVG is exported with from these, they get stuck with a fill="#000000" attribute. This makes it impossible to style the colors of these icons through CSS on the web.

If the fill of the icons was switched over to registration, the fill attribute goes away and colors can be controlled through CSS.

bower.json is missing version number (1.0.1)

Submission of Security trash glyphs to the IDL repo

Hi James and Matt! Can we merge these to our library? Thanks, Hayley

Add aria tags to generated svgs

SVGS could use an aria-labeled-by="title" with a title for better accessibility on screen readers.

Named ES2015 export properties for À la carte consumption

We should expose the icons as named exports so the import UX can match up to this:

import { debug, api, tile-view } from 'ibm-design-icons'; 

Bee 16’s wings are asymmetrical

While performing some optimizations with SVGO, I noticed that little bee's wings are not symmetrical. I believe the right wing is correct.

Automatically compress pngs on export

Pngs include a lot of metadata that we don't need to ship. When generating the dist we should strip that content.