IBM Design icons are sharp and clever. Their geometry is paired with the delightful details that make for an instantly recognizable style.
Timeless and approachable
Bring together scientific precision and artistic craftsmanship to deliver icons that are easy to understand and fun to use.
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 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.
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.
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.
Use a grid to create icons with accuracy and alignment.
Focus on culturally familiar metaphors to create a recognizable icon.
Apply classic proportions and ratios to build enduring icons that outlast trends.
Mix sharp angles with round shapes and outlines with solids to provide a balanced, friendly tone.
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.
Make icons the right size
After choosing a basic geometric shape, place your icon on the providedand 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.
- 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.
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.
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. Create icons in multiple sizes to support a variety of screen densities. Before exporting, optimize file sizes and remove any unnecessary metadata.
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.
Navbar without 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.
IBM icons are monochromatic. The minimum contrast ratio for icons is 3.0, and the recommended contrast ratio is 4.51. See thefor more specifics about contrast ratio guidelines.
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.
- 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.
Apply the appropriate color treatment based on whether your product is for external or internal IBM use only.