![Page 1: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/1.jpg)
ICONOGRAPHY
January 2017 | GPDL 2.0
![Page 2: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/2.jpg)
Iconography
Using the Guidelines
This document contains basic information about Zebra icons. The proper use of Zebra icons helps create a unified family appearance that is used across a variety of platforms.
To access the current library or to request a new icon, contact: [email protected]
Icons are symbols that help users to interact with our devices, draw attention to features, and guide a user through an interface, without relying on a written language. Due to the growing occurance of displays and the global reach of products, universal icons are critical to a positive and consistent user experience.
The three main categories are general icons, app icons, and Mobility DNA software ecosystem icons.
Essence of Iconography
2ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 3: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/3.jpg)
Privileged and Confidential. Do not copy or distribute.
Table of Contents
Iconography Basics5 Character
6 Standardization and Scalability
7 General Icon Color Use
8 Icon Library
9 Do’s and Dont’s
App Icons12 Character
13 Color Use
14 Do’s and Dont’s
Mobility DNA Software Ecosystem Icons16 Character
17 Color Use
18 Do’s and Dont’s
Contact19 Contact Information
3ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 4: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/4.jpg)
Iconography Basics
4Privileged and Confidential. Do not copy or distribute.Privileged and Confidential. Do not copy or distribute. 4ICONOGRAPHY GUIDELINES
![Page 5: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/5.jpg)
Iconography BasicsCharacter
All our icons have been created to visually
match with our logo. The Zebra head symbol
in our logo has both sharp corners and soft
edges, parallel lines and curves, negative
space and solid fills and so do our icons.
Our icon shapes are bold and geometric.
Symmetry and consistency of shapes give our
icons a unique quality, while keeping them
simple and easy to understand.
The design of our icons is modern and
friendly. Each icon is distilled to its essence
and designed to ensure readability and clarity
even at small sizes.
Sharp
SharpRounded
Rounded
Sharp
Rounded
5ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 6: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/6.jpg)
Iconography Basics
Icons are developed on a 64 x 64 grid so
that they can easily scale across a range
of resolutions.
The metaphor is the core of each icon.
All metaphors are are drawn in 2D frontal
view as a silhouette. This helps convey
the message directly and easily.
Standardization and Scalability
6ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 7: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/7.jpg)
Iconography BasicsGeneral Icon Color Use
In most cases, the general icons should
use black and white depending on what
provides the highest contrast. Grey
colors can be used in buttons, shapes
and other user interface assets to create
a color diversity.
Brand colors can also be used for
general icons when necessary.
Black and White Greyscale
Brand Colors
7ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 8: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/8.jpg)
Iconography BasicsIcon Library
These basic principles help create the
unique Zebra icon library. Each member
communicates well with other members in
the library since they share the same
principles and this strengthens the “family”
feel.
Please contact [email protected] for the
latest version of the icon library.
General Icons
App Icons
Mobility DNA Software Ecosystem Icons
8ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 9: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/9.jpg)
DO use the icons on solid color backgrounds and use high contrast between the metaphor and the background.
DON’T use patterns or gradient backgrounds. Make sure to use high contrast between the metaphor and the background.
X X X X
Iconography BasicsDo’s and Don’ts
The following rules apply to all icons.
9ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 10: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/10.jpg)
DO provide clearspace around the icons.
DO use the original icons.
DON’T crowd the icons very close to each other.
DON’T modify or change the icons.
X
X
x
1/4x
1/4x
1/4x
Iconography BasicsDo’s and Don’ts
The following rules apply to all icons.
10ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 11: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/11.jpg)
App Icons
11Privileged and Confidential. Do not copy or distribute.Privileged and Confidential. Do not copy or distribute. 11ICONOGRAPHY GUIDELINES
![Page 12: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/12.jpg)
App IconsCharacter
App icons build upon the general icon
principles. With the addition of colors and
shadows, these icons are designed to
stand out from the crowd.
12ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 13: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/13.jpg)
App IconsColor Use
The colors for the application icons are
selected based on their functionalities.
Each color indicates a different category. This is our first primary color.This color is used for productivity apps, like communications, barcode
scanning, etc.
This is our second primary color.This color is used for apps that help maintain the device, like file browser,
network operations etc.
This is our supplementary color.This color is used for apps that help manage the device, like settings,
diagnostics, etc.
This is our supplementary color.This color is used for apps that add extra functionalities to the device, like
configuration tools, enterprise keyboard, etc.
This is our supplementary color.This color is used for miscellaneous apps of secondary importance.
This is our supplementary color.This color is used for demo apps to help sales and marketing.
13ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 14: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/14.jpg)
DO use the shadow to add depth.
DO use the original icons.
DON’T remove the shadow.
DON’T modify or change the icons.
X
X
App IconsDo’s and Don’ts
The following rules apply to app icons.
14ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 15: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/15.jpg)
Mobility DNA Software Ecosystem Icons
15Privileged and Confidential. Do not copy or distribute.Privileged and Confidential. Do not copy or distribute. 15ICONOGRAPHY GUIDELINES
![Page 16: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/16.jpg)
Mobility DNA Software Ecosystem IconsCharacter
Mobility DNA software ecocsystem icons
build upon the general icon principles.
With the addition of gradient colors and
strokes, these icons are designed to
stand out from the crowd whether they
are used in print or on screen.
16ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 17: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/17.jpg)
Color Use
Mobility DNA software ecosystem icons use
blue tones combined with gradients and
highlight sheens. These additional elements
add a unique visual appeal and distinction
that makes them well suited for marketing
purposes.
Mobility DNA Software Ecosystem Icons
17ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 18: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/18.jpg)
DO use the supplied colors.
DO use the original icons.
DON’T use different colors.
DON’T modify or change the icons.
Do’s and Don’ts
The following rules apply to Mobility DNA
software ecosystem icons.
X
X
X
Mobility DNA Software Ecosystem Icons
18ICONOGRAPHY GUIDELINESPrivileged and Confidential. Do not copy or distribute.
![Page 19: ICONOGRAPHY - Zebra Technologies · 2019-12-23 · Iconography Basics Character All our icons have been created to visually match with our logo. The Zebra head symbol in our logo](https://reader033.vdocument.in/reader033/viewer/2022041718/5e4cfcb932cc27065d2c042b/html5/thumbnails/19.jpg)
CONTACTZebra Technologies Corporation3 Overlook Point
Lincolnshire, IL 60069
For more information, contact:
Privileged and Confidential. No unauthorized distribution or copying. ©2016 ZIH Corp and/or its affiliates. All rights reserved. ZEBRA and the stylized Zebra
head are trademarks of ZIH Corp., registered in many jurisdictions worldwide. All other trademarks are the property of their respective owners.