Iconography

IBM Design icons are sharp and clever. Their geometry is paired with the delightful details that make for an instantly recognizable style.

Animation of a clock with a minute hand ticking. Animation of a clock with a minute hand ticking.

Timeless and approachable

Bring together scientific precision and artistic craftsmanship to deliver icons that are easy to understand and fun to use.

Basics

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.

Properly used icons make it easier to intuit an experience. They relay functionality and help users make good choices. Conversely, overuse of icons can increase cognitive load for users.

Do not use icons as aesthetic decoration, but rather for communication. Avoid obscure metaphors, opting for text labels or annotations instead.

Use symbols that are recognizable to your users and work for a global audience. If your icon affords interactivity, give it a text label. All icons should have a text-based equivalent for screen readers.

Glyphs

Glyphs are distinguished by their solid shape and knocked-out details. Their recommended size is 24 by 24 pixels, the smallest recommended size for touch interfaces. Glyphs that are not meant for touch should be no smaller than 16 by 16 pixels.

scissor scissor
pencil pencil
paperclip paperclip
lock lock
bookmark bookmark
comment comment
location location
raft raft
heart heart
house house
printer printer
speaker speaker

Icons

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 by 32, 64 by 64, and/or 128 by 128 pixels.

An icon with a size of 128 by 128 px An icon with a size of 128 by 128 px

128 by 128 px

An icon with a size of 64 by 64 px An icon with a size of 64 by 64 px

64 by 64 px

An icon with a size of 32 by 32 px An icon with a size of 32 by 32 px

32 by 32 px

Style

Balance the four elements of style to embody a uniquely IBM character. Icons should be enjoyable to use, easy to understand and culturally acceptable. Be aware: icons that may be acceptable in one culture may not be in another, and in some cases, may even be offensive. Always make sure to test iconography with your users.

scissors scissors

Precise

Use a grid to create icons with accuracy and alignment.

printer printer

Obvious

Focus on culturally familiar metaphors to create a recognizable icon.

eye eye

Timeless

Apply classic proportions and ratios to build enduring icons that outlast trends.

house house

Approachable

Mix sharp angles with round shapes and outlines with solids to provide a balanced, friendly tone.

Build

Apply basic building blocks to achieve harmony when creating icons. Icons should be drawn head-on without any perspective. Avoid unnecessary effects, realism, borders, visual complexity or 3D treatment.

Start with geometric shapes

When designing your own icons, start with the basics. It’s as easy as drawing circles and squares.

Start with simple geometric shapes and mathematical proportions.

For more complex icons, consider repeating sophisticated shapes such as hexagons or right triangles.

Make icons the right size

After choosing a basic geometric shape, place your icon on the provided grid template and size your icon based on its orientation. Differences in padding ensure that icons will look similar in size regardless of their shape. Build the remaining shapes of your icon, aligning your shapes to a pixel grid.

Camera with a grid in background
Camera with a grid in background
Camera with a grid in background
Camera with a grid in background
  • 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.

Create a precise outline

Create sharp, technical outlines to evoke a sense of clarity and accuracy. Using consistent line weights across icons helps groups of icons feel similar.

Square corners versus rounded corners on two similar icons Square corners versus rounded corners on two similar icons

On the left, sharp angles and geometric shapes give a machined quality to the design. On the right, round corners and organic shapes feel less trustworthy and precise.

Finish the icons with a balancing solid

Look for opportunities to balance fine, technical line work with a solid element for a feeling of stability.

Four icons, a compass, a letter, a chat bubble, and a person Four icons, a compass, a letter, a chat bubble, and a person

Export your icon

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, 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.

Placement

Give icons generous spacing to increase visibility and interactivity. As much as possible, keep labels at a separate (text) level for ease of translation.

Vertical navigation menus

Center-align icons and labels within vertical menus. Include additional padding for labels by adding the line height of your text to the icon’s recommended padding.

Vertical navigation bar at the width of 64px, which is thinner due to its lack of labels Vertical navigation bar at the width of 64px, which is thinner due to its lack of labels

Navbar without labels

Vertical navigation bar at the width of 82px, which has to be a little wider because it has labels Vertical navigation bar at the width of 82px, which has to be a little wider because it has labels

Navbar with labels

Horizontal navigation menus

For horizontal menus with small labels, center-align icons and center the label below the icon. For menus with larger labels, middle-align both icons and labels.

Horizontal navigation bar at the height of 82px, which has to be a little taller because it has labels below its icons Horizontal navigation bar at the height of 82px, which has to be a little taller because it has labels below its icons

Navbar with small labels

Horizontal navigation bar at the height of 64px, which is shorter due to the labels being full-sized and next to the icon rather than below it Horizontal navigation bar at the height of 64px, which is shorter due to the labels being full-sized and next to the icon rather than below it

Navbar with large labels

Icon color

IBM icons are monochromatic. The minimum contrast ratio for icons is 3.0, and the recommended contrast ratio is 4.51. See the color contrast section for more specifics about contrast ratio guidelines.

Icons in purple with a purple background Icons in purple with a purple background

Apply the same color to each icon in any set of four or more icons.

App icons

For a signature identifier that helps a user connect with your product across contexts, design application icons to be engaging and delightful expressions of IBM’s brand.

iOS App Icons

iOS uses versions of the app icon in Game Center, Spotlight search results, settings and to represent app-created documents. More details about iOS application icon design can be found here.

Use the icon principles, building blocks and best practices from the iconography section to design a logo mark for your application icon.

Animation of an iOS App Icon building from a color block, bee icon, and text to then placing itself onto an iPhone screen Animation of an iOS App Icon building from a color block, bee icon, and text to then placing itself onto an iPhone screen
  • Create an abstract interpretation of your app’s main purpose.
  • Make sure the app icon looks good and clear on a variety of backgrounds, color depths and resolutions.
  • Avoid transparency. An app icon should be opaque.
  • Do not use iOS interface elements in your artwork.
  • Do not use replicas of Apple or IBM hardware in your artwork.
  • Avoid the reuse of iOS app icons in your interface.
  • Icons are flat, monochromatic and geometric.

Keep it simple

Avoid cramming lots of different images into your icon. Find a single element that captures the essence of your app and express this element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can become confusing and might appear muddy at smaller sizes.

Use universal imagery

Avoid focusing on a secondary or obscure aspect of an element. For example, the Mail app icon is an envelope as opposed to a rural mailbox, a mail carrier’s bag, or a post office symbol.

Avoid unnecessary details

If the background of your icon is white, don’t add a gray overlay in an effort to increase its visibility in Settings. iOS adds a 1-pixel border stroke so that all icons look good on the white background of Settings. Do not apply the IBM logo mark to any icons smaller than 60 by 60 pixels.

An application's icons at various sizes An application's icons at various sizes

Color treatment

Apply the appropriate color treatment based on whether your product is for external or internal IBM use only.

An external icon An external icon

External icon

Footer Hex #464646

Monochromatic background

An internal icon An internal icon

Internal icon

Footer Hex #4178BE

Background Hex #F4F4F4

Back to top