Icons and illustrations
Explore Visa-branded and generic icon libraries that represent core functions, ideas, and content.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Icons
Note: Nova icons include
- Use an
along with attributes on the svg when needed to give it an accessible name for a screen reader. - Ensure icon buttons have an
, although the icon it contains should not to avoid duplicate announcements. - Edit the SVG code and add appropriate attributes to hard-coded custom icons, as a hardcoded
color won’t adjust in Windows high contrast mode.
Images
- Ensure images using an
element have an attribute. - Ensure purely decorative images have an empty
value so they’re ignored by screen readers. - Ensure images that add meaning have an
value with a succinct description and a color contrast ratio of at least 3:1.
- Ensure purely decorative images have an empty
- Use extreme caution when placing images or background images behind text. Remember that the screen will shift responsively for different screen sizes which will reposition items.
- Perform manual testing when needed as automated testing generally won’t test contrast between an image and foreground text.
Right to left languages
- Use VPDS’s rtl class for “back”, “forward”, “previous”, and “next” arrows for left-to-right languages. Also be aware of directional icons including chevrons, “opens in a new window”, or “maximize tiny”.
- Ensure images that are directional or show progress adjust for rtl languages, as VPDS doesn’t have an RTL class for images.