Icons

Overview

VUD offers a variety of SVG icons, categorized into two styles:

1. Standard
2. 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:

1. Worksurface
2. Action
3. Informative
4. 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:

1. light mode
2. dark mode
3. 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">