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-angular
• @visa/nova-icons-react
• @visa/nova-icons-sprite
• @visa/nova-icons-svg

Available through the NPM.

NPM:

npm i @visa/nova-icons-angular

npm i @visa/nova-icons-react

npm i @visa/nova-icons-sprite

npm i @visa/nova-icons-svg

PNPM:

pnpm i @visa/nova-icons-angular

pnpm i @visa/nova-icons-react

pnpm i @visa/nova-icons-sprite

pnpm i @visa/nova-icons-svg

Yarn:

yarn add @visa/nova-icons-angular

yarn add @visa/nova-icons-react

yarn add @visa/nova-icons-sprite

yarn add @visa/nova-icons-svg

Dependencies

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

Usage

Angular

Package: @visa/nova-icons-angular

Supported Angular Versions: 16 - 19

For Angular, we built out each icon to be a standalone component. We also have all icons wrapped inside Angular modules for each icon type (Generic and Visa). This allows you to pick and chose which icons you'd like or if you want an entire icon type you can also import it's module. We architected the library to allow for deep tree shaking so the icons you use should be the only ones that get bundled with your app. This reduces build and load times as well as app sizes. The Angular library also supports Typescript out of the box.

Using Angular icons

If you only need a few icons you can simply import them directly. For this example we will be using a standalone component. First import the desired icon from @visa/nova-icons-angular. Then use it inside your HTML.

my-component.component.ts:

import { Component } from "@angular/core";
import { GenericAccessabilityLow, GenericCalendarTiny } from "@visa/nova-icons-angular";
@Component({
	selector: "simple-my-component",
	templateUrl: "./my-component.component.html",
	standalone: true,
	imports: [GenericAccessabilityLow, GenericCalendarTiny],
})
export class MyComponent {}

my-component.component.html:

<div class="my-component">
	<svg v-icon-generic-accessability-low />
	<svg v-icon-generic-calendar-tiny />
</div>

Using Angular module

If you need a lot of icons or just want a single simple import you can use the angular icon modules. For this example we will be using a standalone component. First import the desired icons module from @visa/nova-icons-angular. Then use the icons directly inside your HTML.

my-component.component.ts:

import { Component } from "@angular/core";
import { NovaIconsGenericModule } from "@visa/nova-icons-angular";
@Component({
	selector: "simple-my-component",
	templateUrl: "./my-component.component.html",
	standalone: true,
	imports: [NovaIconsGenericModule],
})
export class MyComponent {}

my-component.component.html:

<div class="my-component">
	<svg v-icon-generic-accessability-low />
	<svg v-icon-generic-calendar-tiny />
</div>

Right to left support in Angular

We support right to left (RTL) out of the box. Simply pass the rtl prop and the icon will flip horizontally when the html direction is set to rtl. For more info on RTL support we have some helpful resources listed in the Helpful Angular resources section.

my-component.component.html:

<div class="my-component">
	<svg v-icon-generic-connect-low rtl />
</div>

Flutter

Package: visa_nova_icons_flutter

For Flutter, we have converted all sprites into a Dart file that contains all icons' SVG strings. This allows you to pick and choose which icons you'd like. We architected the library to allow tree shaking so the icons you use should be the only ones that get bundled with your app. This reduces build and load times as well as app sizes. The Flutter library supports strict typing and null safety out of the box and is built with the newest versions of Flutter and Dart SDKs.

Pub Install

Add the following to your pubspec.yaml file under dependencies. Then run flutter pub get.

dependencies:
    visa_nova_icons_flutter:
        version: ^3.0.0
        hosted:
            name: visa_nova_icons_flutter
            url: https://artifactory.trusted.visa.com/api/pub/flutter-commons

Using Flutter icons

We've built some helpful tools for using the icons library inside our components library. To best use the icon, import the library along side our visa_nova_flutter library.

import 'package:visa_nova_icons_flutter/visa_nova_icons_flutter.dart';
import 'package:visa_nova_flutter/visa_nova_flutter.dart';
import 'package:flutter/material.dart';

class MyGenericIconWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: VIcon(
        svgIcon: VIconsGeneric.launchLow,
      ),
    );
  }
}

class MyVisaIconWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: VIcon(
        iconColor: VColors.positiveGraphics,
        svgIcon: VIcons.successTiny,
      ),
    );
  }
}

React

Package: @visa/nova-icons-react

Supported React Versions: 18 - 19

For React, we built out each icon to be a React component. This allows you to pick and chose which icons you'd like. We architected the library to allow for deep tree shaking so the icons you use should be the only ones that get bundled with your app. This reduces build and load times as well as app sizes. The React library also supports Typescript out of the box. We also have support for all SVG properties and refs.

Using React icons

Install the package then simply import the desired icons directly from @visa/nova-icons-react. Then use it as a component inside your JSX.

my-component.tsx:

import { GenericAccessibilityLow, GenericCalendarTiny } from "@visa/nova-icons-react";

export const MyComponent = () => (
	<div>
		MyComponent
		<GenericAccessibilityLow />
		<GenericCalendarTiny />
	</div>
);

Right to left support in React

We support right to left (RTL) out of the box. Simply pass the rtl prop and the icon will flip horizontally when the html direction is set to rtl. For more info on RTL support we have some helpful resources listed in the Helpful React resources section.

import { GenericAccessibilityLow, GenericCalendarTiny } from "@visa/nova-icons-react";

export const MyComponent = () => (
	<>
		{/** This icon will flip on right to left: */}
		<GenericAccessibilityLow rtl />

		{/** This icon will NOT flip: */}
		<GenericCalendarTiny />
	</>
);

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");

SVG

Package: @visa/nova-icons-svg

What are SVGs

SVG stands for Scalable Vector Graphics. It's a type of image format that's based on XML (a way of structuring data) and is used to create two-dimensional graphics. The key feature of SVGs is that they are scalable, which means they can be resized without losing any quality. This makes them ideal for use on the web where images need to look good on a variety of screen sizes and resolutions. They are also much smaller in size than JPEGs and PNGs.

Example of an SVG:

<svg
	class="v-icon v-icon-generic v-icon-tiny v-icon-checkmark"
	width="16"
	height="16"
	viewBox="0 0 16 16"
	xmlns="http://www.w3.org/2000/svg"
>
	<path
		class="v-icon-primary"
		fill-rule="evenodd"
		clip-rule="evenodd"
		d="M13.7205 3.29397C13.3331 2.90266 12.7519 2.90266 12.3644 3.29397L5.97141 9.75049L3.64668 7.40266C3.25923 7.01136 2.67805 7.01136 2.29059 7.40266C1.90314 7.79397 1.90314 8.38092 2.29059 8.77223L5.1965 11.707C5.58396 12.0983 6.16514 12.0983 6.55259 11.707L13.6236 4.56571C14.108 4.27223 14.108 3.58744 13.7205 3.29397Z"
	/>
</svg>

SVG Color

WCAG requires icons to use a contrast ratio of 4.5:1 between the icon and background color. You can verify contrast with various browser dev tools such as "Lighthouse" and "axe DevTools". To recolor the icons globally you can leverage the built in CSS classes, like "v-icon-primary" and "v-icon-secondary" these allow you to map the fill color to a CSS variable or a specific color. You can also specify which color you want mapped to each category of icon. Generic icons only have one color v-icon-primary. Visa icons have two colors: v-icon-primary, and v-icon-secondary.

.v-icon-primary {
	fill: black;
}
.v-icon-generic .v-icon-primary {
	fill: blue;
}
.v-icon-visa .v-icon-secondary {
	fill: gold;
}

Using SVGs in HTML

HTML supports SVGs out of the box so you simply paste your SVG inside your desired html.

<!DOCTYPE html>
<html>
	<head>
		<title>My Simple HTML Page</title>
	</head>
	<body>
		<h1>Welcome to My Website!</h1>
		<p>This is a simple HTML document.</p>
		<!-- SEE THIS LINE: -->
		<svg
			class="v-icon v-icon-generic v-icon-tiny v-icon-checkmark"
			width="16"
			height="16"
			viewBox="0 0 16 16"
			xmlns="http://www.w3.org/2000/svg"
		>
			<path
				class="v-icon-primary"
				fill-rule="evenodd"
				clip-rule="evenodd"
				d="M13.7205 3.29397C13.3331 2.90266 12.7519 2.90266 12.3644 3.29397L5.97141 9.75049L3.64668 7.40266C3.25923 7.01136 2.67805 7.01136 2.29059 7.40266C1.90314 7.79397 1.90314 8.38092 2.29059 8.77223L5.1965 11.707C5.58396 12.0983 6.16514 12.0983 6.55259 11.707L13.6236 4.56571C14.108 4.27223 14.108 3.58744 13.7205 3.29397Z"
			/>
		</svg>
	</body>
</html>

Import SVG for use in Javascript

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

// ESM:
import GenericAccessabilityLow from "@visa/nova-icons-svg/generic/accessability-low.svg";
import GenericCalendarTiny from "@visa/nova-icons-svg/generic/calendar-tiny.svg";

// CommonJS:
const GenericAccessabilityLow = require("@visa/nova-icons-svg/generic/accessability-low.svg");
const GenericCalendarTiny = require("@visa/nova-icons-svg/generic/calendar-tiny.svg");

Right to left support in HTML

We support right to left (RTL) out of the box. Simply pass the v-icon-rtl class to the classes and the icon will flip horizontally when the html direction is set to rtl. For more info on RTL support we have some helpful resources listed in the Helpful SVG resources section.

<svg
	class="v-icon v-icon-generic v-icon-tiny v-icon-checkmark v-icon-rtl"
	width="16"
	height="16"
	viewBox="0 0 16 16"
	xmlns="http://www.w3.org/2000/svg"
>
	<path
		class="v-icon-primary"
		fill-rule="evenodd"
		clip-rule="evenodd"
		d="M13.7205 3.29397C13.3331 2.90266 12.7519 2.90266 12.3644 3.29397L5.97141 9.75049L3.64668 7.40266C3.25923 7.01136 2.67805 7.01136 2.29059 7.40266C1.90314 7.79397 1.90314 8.38092 2.29059 8.77223L5.1965 11.707C5.58396 12.0983 6.16514 12.0983 6.55259 11.707L13.6236 4.56571C14.108 4.27223 14.108 3.58744 13.7205 3.29397Z"
	/>
</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