The new icon system for mobile apps at Bank of the West aims to be simple, current, friendly, and occasionally quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. They are conceived to ensure readability and pristine clarity even at small sizes.
While the iconography system covers strategically thought out groups of assets (navigation, utilities, controls, products, notifications, messaging and social media), this article will focus on the Products icons, which required a great deal of attention to detail and sophistication. A few icons are borrowed from other design systems for consistency.
Anatomy of the Icon
Given the intended simplicity of design, I set forth to begin design with the smallest size required first and let software resize automation create the larger versions. The minimum size must provide pristine clarity.
The style is based on a dark, "wiry" look and feel with a color accent – only the Product icons carry this color accent.
Principles of Design
• Icons must be consistent in weight
• Icons must snap to the grid to avoid blurry display
• As much as possible, use 90º and 45º stroke terminals
• Base the icon design on geometric shapes
• Outside corners should have a 2px radius (no less, no more)
• Gutter separations must have the same weight as the wires (1px)
• Provide a sense of movement whenever possible
• For bottom navigation, use reverse, white treatment
Geared towards iOS (up to iPhone 8) and Android devices.
Library of Product Icons
The Iconography in Context