Overview
VUD offers a variety of SVG icons, categorized into two styles:
- Standard
- Dynamic
These icons are organized into two main packages of minified CSS variants. In the first package, the primary style consists of standard icons while the secondary style features dynamic icons. Conversely, the second package prioritizes dynamic icons as the primary style and standard icons as the secondary style. The icons are divided into 4 major icon collections:
- Worksurface
- Action
- Informative
- Flags
The primary collection of icons is organized within an extension library exclusively dedicated to VUD-icons. The main VUD library contains only those icons that are either included or utilized within the library components.
Installation
To utilize the icon component, you must either install it through npm, load it from a CDN link, or download it from a zip archive file.
NPM
To utilize the most recent release, employ:
npm i @vismaux/vud-icons
For access to the latest beta release, utilize:
npm i @vismaux/vud-icons@beta
For a particular beta release, include the suitable version label for the release:
npm i @vismaux/vud-icons@1.8.3-beta.3
CDN
You can import icons from a CDN link into your HTML or CSS using the example provided below.
HTML
<link rel="stylesheet" href="https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.min.css">
CSS
@import url("https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.min.css");
ZIP
Download the latest ZIP with all the icons and CSS.
Style
The minified CSS is structured into three iterations:
- light mode
- dark mode
- both light & dark modes
Additionally, each version features a dynamic variant as its core/primary icon style.
<!-- Light mode, standard icon sets as primary style -->
<link rel="stylesheet" href="https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.min.css">
<!-- Light mode, dynamic icon sets as primary style -->
<link rel="stylesheet" href="https://vud-icons.s3.eu-north-1.amazonaws.com/v1.8.3-beta.1/dist/css/vud-icons-dynamic.min.css">
<!-- Dark mode, standard icon sets as primary style -->
<link rel="stylesheet" href="https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.dark.mode.min.css">
<!-- Dark mode, dynamic icon sets as primary style -->
<link rel="stylesheet" href="https://vud-icons.s3.eu-north-1.amazonaws.com/v1.8.3-beta.1/dist/css/vud-icons-dynamic.dark.mode.min.css">
<!-- Light and dark mode, standard icon sets as primary style -->
<link rel="stylesheet" href="https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.light-dark.mode.min.css">
<!-- Light and dark mode, dynamic icon sets as primary style -->
<link rel="stylesheet" href="https://vud-icons.s3.eu-north-1.amazonaws.com/v1.8.3-beta.1/dist/css/vud-icons-dynamic.light-dark.mode.min.css">