Iconography

Icons are used throughout the Admin interface, often as a controls to initiate a function (such as "Filter"), or to direct the user to section (such as "Account").

Icons are meant to provide a visual representation of functionality or content and should therefore bear some conceptual resemblance to them. Icons should be able to communicate their "use" to the user without the assistance of a text label, though labels should be used in the UI whenever possible to minimize ambiguity.

How icons are used

Icons may appear in a variety of sizes within the interface as controls for tools and functions and to assist in "way-finding" within the application. Principles of a "Touch-Friendly" UI should be observed; icons should be large enough to provide a reasonable "touch-target" for the user. The icon may be scaled at something less than this optimal size when coupled with a "target" area that provides this optimal size, such as an expand control used where the entire header row is clickable/tappable.

The functionality associated with a particular icon should be used consistent throughout the application.

Typically icons should represent a single, unique concept and be used consistently in the UI. However some icons have a dual purpose and rely on size, placement and context to communicate their meaning to the user. The "Error" icon is an example of this. When used in an "Alert", the supporting elements of copy, position, etc. help provide meaning. This same icon can also be used as a remove or close control, and size, color, position and context differentiate its' use for the user.

Icon Library

In the Admin UI icons have a simple, flat, single-color, 2D, style. This style prevents the loss of detail at smaller sizes and makes the shapes easier to comprehend.

Creating Icons

Rules

Icons should be designed on the 300px by 300px icon grid.
Icons should be monochromatic.
Icons should look like they are part of the "family" of icons.
Line weights should be consistent with other icons in the library.
Elements within the icon should be consistent with these elements icons in the library (i.e. "Arrows").
Cantered or rotated elements should observe a 45 degree angle.
A limited perspective should be used.

Any icon that is intended for general use in the UI should be submitted to the Commerce Product Team for review and inclusion to the 'icon font'.

Guides

Here is a guide to help you get started creating your own icon:

How to use the icon grid:

Icon Fonts

We recommend using icon fonts to get the best quality for your icons. The Commerce icon fonts can be found in app/design/adminhtml/Magento/backend/web/fonts/admin-icons

Accessibility

Efforts should be made to optimize icons and/or icon fonts for assistive technology.

Use "aria-hidden" attribute: Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers hide them with the aria-hidden="true" attribute.

From: http://getbootstrap.com/components/

Example of "aria-hidden" attribute

<style>
  .icon-star:before { content: "★ "; }
</style>

<span><span class="icon-star" aria-hidden="true"></span>Favorite</span>

From: Bulletproof Accessible Icon Fonts

How to make your icon font accessible in three easy steps

Icons, whether font-based or not, should be very descriptive, especially if they stand on their own. If in doubt, add descriptive text so users can find out what it means.

Never use "regular letters" for icons. Use a service like Icomoon and use the private use area (PUA) of the font. Those areas are specifically made for this usage and do not have any letters attached to them. Screen readers will not read letters in the PUA.
Use colors with enough contrast for your icons.
Never use an icon without text (that you may hide). Since icons are not read aloud by screen readers, alternative text is essential to help users understand what is on the screen. Alternative text can be omitted only if the content makes sense without the icon.