npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@visa/nova-icons-svg

v4.0.0

Published

Visa Product Design System's Nova version icons SVG package.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

chris-demartinichris-demartinijbrans-visajbrans-visamichaelyang1michaelyang1visaproductdesignsystemvisaproductdesignsystem

Keywords

Readme

Visa Product Design System - Nova icons

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-svg

Available through the NPM.

NPM:

npm i @visa/nova-icons-svg

PNPM:

pnpm i @visa/nova-icons-svg

Yarn:

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

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