Visa Product Design System - Nova icons

• About
• Security
• Background
• Install
• Usage
• Why Nova icons?
• Testing
• Maintainers
• Thanks
• Contributing
• License

Nova icons

Icon Types

We support two types of icons:

• Generic [non-branded]
• Visa

Supported libraries

We also support multiple ways of consuming icons:

• Angular components/modules
• Flutter widgets
• React components
• SVG files
• Sprite files

Security

Our package follows security best practices and ensures the safety of user data. It relies on a minimal number of dependencies, minimizing potential vulnerabilities.

Install

NPM Packages

Available Packages:

• @visa/nova-icons-sprite

Available through the NPM.

NPM:

npm i @visa/nova-icons-sprite

PNPM:

pnpm i @visa/nova-icons-sprite

Yarn:

yarn add @visa/nova-icons-sprite

Dependencies

View our package.json for the most up-to-date dependencies, including peer dependencies and dev dependencies.

Usage

Sprites

Package: @visa/nova-icons-sprite

What are sprites

A sprite is a collection of SVG icons composed into a single file. This method is often used to allow for a single server request for all icons. This is the most efficient way of displaying large numbers of icons, if it is determines most icons will be used during a session.

Example of a sprite:

<svg class="v-icons v-icons-generic">
	<symbol
		id="calendar--low"
		class="v-icon v-icon-generic v-icon-low v-icon-calendar"
		width="24"
		height="25"
		viewBox="0 0 24 25"
	>
		<path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M44.5051 5H35.0051V1.5C35.0051 0.672 34.3331 0 33.5051 0C32.6771 0 32.0051 0.672 32.0051"
			class="v-icon-primary"
		/>
	</symbol>
	<symbol
		id="calendar--tiny"
		class="v-icon v-icon-generic v-icon-tiny v-icon-calendar"
		width="16"
		height="16"
		viewBox="0 0 16 16"
	>
		<path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M44.5051 5H35.0051V1.5C35.0051 0.672 34.3331 0 33.5051 0C32.6771 0 32.0051 0.672 32.0051"
			class="v-icon-primary"
		/>
	</symbol>
	<symbol
		id="information--high"
		class="v-icon v-icon-generic v-icon-high v-icon-information"
		width="49"
		height="48"
		viewBox="0 0 49 48"
	>
		<path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M44.5051 5H35.0051V1.5C35.0051 0.672 34.3331 0 33.5051 0C32.6771 0 32.0051 0.672 32.0051"
			class="v-icon-primary"
		/>
	</symbol>
	<!-- ...MANY MORE SYMBOLS... -->
</svg>

Using sprites in HTML

First you need to embed the sprite into your root element, or the highest scope needed to access the icons from children elements. You will then want to hide the sprite through this CSS: display: none;. Once embedded you can now link to your sprite by leveraging the id of the symbol you wish to add to your application, as seen bellow. You can add any class to the SVG to style it properly. The default class should be v-icon prefix with a no qualifier, category, size, and name all as separate classes with said prefix.

<svg class="v-icon v-icon-generic v-icon-tiny v-icon-calendar" height="16px" width="16px">
	<use href="#calendar--tiny" xlink:href="#calendar--tiny"/>
</svg>

Importing sprites for use in Javascript

After installing the @visa/nova-icons-sprite library you can import the sprite files directly.

// ESM:
import GenericSprite from "@visa/nova-icons-sprite/generic.svg";
import VisaSprite from "@visa/nova-icons-sprite/visa.svg";

// CommonJS:
const GenericSprite = require("@visa/nova-icons-sprite/generic.svg");
const VisaSprite = require("@visa/nova-icons-sprite/visa.svg");

Why Nova icons?

Extensive Icon Library

Our extensive library features a vast array of icons meticulously crafted by our talented designers. Whether you need icons for accessibility, navigation, or specific branding, our collection has you covered. With Nova icons, you can effortlessly enhance your application's user interface with beautifully designed, purpose-driven icons.

Cross-Platform Compatibility

Nova icons are designed to be compatible with multiple platforms, including Angular, Flutter, React, and plain SVG files. This ensures that no matter what technology stack you are using, you can easily integrate our icons into your project.

Accessibility First

We prioritize accessibility in our icon design, ensuring that all icons meet WCAG standards. This includes providing sufficient contrast and supporting right-to-left (RTL) languages out of the box. Our icons are designed to be inclusive and usable by everyone.

Testing

Our Approach

Testing

Our Approach

We conduct rigorous testing to ensure our icons work seamlessly across all supported platforms, including Angular, Flutter, React, and plain SVG files.

Our goal is to achieve 100% test coverage for all icons. Our pipeline safeguards against merging any code that fails our tests, ensuring that our icons remain reliable and consistent across all platforms.

Maintainers

This project is maintained by the Visa Product Design System engineering team. If you need to get in touch please reach out to us via any of our options on our support page.

Thanks

Thanks to all those who have contributed and to the Visa Product Design team for all of the hours and thought that have gone into making the design system as easy to use as possible.

Contributing

SEE CONTRIBUTING.md

License

SEE LICENSE IN LICENSE