Icons and illustrations
Explore Visa-branded and generic icon libraries that represent core functions, ideas, and content.
Icons are visual representations of core ideas, functions, or content. The Visa Product Design System currently supports two sets of icons: Visa-branded and generic for all other uses.
Creating on-brand illustrations and visuals is key to designing cohesive, familiar product experiences. Using our brand symbol as the foundation, we extended our iconic color ratio into a unique icon and illustration system. Our new system is consistent and cohesive across our icons, enriched icons, and illustrations. The icons and enriched icons can scale into our illustration style to tell a more comprehensive story. These visual elements broaden our visual language to help us effectively communicate stories, actions, and ideas.
Anatomy
A. Tiny resolution (16x16): Simplified icons placed within components or areas with limited space.
B. Low resolution (24x24): Icons with more detail placed within components when space permits.
C. High resolution (48x48): Detailed icons placed outside components to add visual interest and meaning.
D. Illustration: Larger visuals used to demonstrate complex ideas, add visual interest, or show processes.
Icon best practices
- Use the Visa icon set for Visa-branded products and the generic set for fictitious or partner brands. Reference Fictitious brands and user aliases (internal only) for more information.
- Use icons only when they add meaning, especially when used within interactive components.
- Avoid relying solely on icons to convey meaning unless they are universally understood by most users.
- Use the predefined or recommended icon sizes that correspond to each specific component design.
Do Combine text with icons when creating labels, especially in navigation. This ensure users have a visual cue while also offering context using text.
Don't Use icons as the only form of labels, especially in navigation. While it's possible to use standalone icons on mobile, do so sparingly. An example is a hamburger menu icon.
Do Use icons in components without changing their original size or detail level.
Don't Replace small or tiny icons with high-resolution versions as these are too detailed and complex for small icon spaces.
Do Use the Visa icon set for applications that use the Visa brand.
Don't Use the Visa icon set for designs that use fictitious or partner brands.
Visa icons
The icon set for Visa-branded products is designed to mirror Visa’s original brand assets as closely as possible. Any additions should follow brand guidelines. Existing icons and brand guidelines are available for review on Visa Creative Asset Manager (VCAM). First-time users must contact Visa Brand & Marketing Governance or visit Insite (internal only) to set up an account.
- Use single-color icons for most use cases.
- Use two-color icons when appropriate for dark surfaces.
Design specifications
- Designed with a consistent 2px stroke width, suitable for all canvas sizes
- Incorporates open shapes to provide a unique and distinctive style
- Uses a corner radius that’s typically set at zero, although it may be adjusted depending on specific requirements
- Visit the Visa brand guidelines for more details on design specifications
Generic icons
Generic icons should be used for mockups or any product that does not specifically represent the Visa brand. This icon set originated from Vault, the previous iteration of the design system before Nova.
- Use single-color icons all generic use cases.
Design specifications
- Designed with a 2px stroke width for use on tiny and low-resolution canvas sizes
- High-res icons combine 2px stroke with 3px stroke width used for details
- Uses closed shapes to create clear and distinct icons
- Uses a corner radius that’s set at 1px for tiny and low-resolution canvases, and 2px for high-resolution canvases
Icon size
To provide flexibility, each icon is designed in three different sizes within each set. Although all versions of an icon share the same basic design, additional details are incorporated as the canvas size increases to ensure they maintain clarity and visibility.
Tiny resolution
Tiny-resolution icons are the smallest and simplest. They’re designed on a 16px by 16px canvas. Tiny icons are referred to as “UI icons” in the Visa Brand Identity Guide.
- Many components within the design system use the tiny icon size. This includes tabs, navigation components, badges, and more.
Low resolution
Low-resolution icons have more detail. They’re designed on a 24px by 24px canvas. Low-resolution icons are referred to as “Icons” in the Visa Brand Identity Guide.
- When space permits, it’s recommended to use the low-resolution icons, as they communicate the purpose more clearly when compared to smaller versions.
High resolution
High-resolution icons include additional details to provide visual interest. They’re designed on a 48px by 48px canvas. High-resolution icons are referred to as “Enriched icons” in the Visa Brand Identity Guide.
- Use on content cards or for other, non-component use cases where space allows and visual interest is needed.
Illustration best practices
Product teams must reference Visa’s brand guidelines throughout the design and development process to make informed decisions. Brand offers documentation for illustration guidance in the Brand Identity Asset Library. In the future, we may offer an extension of this guidance specific to user experiences.
Refer to the Visa Brand Identity Guide on Visa Creative Asset Manager (VCAM) to learn more. First-time users on VCAM must contact Visa Brand & Marketing Governance or visit Insite (internal only) to set up an account.