Pictograms

VUD pictograms help you communicate concepts, guide your users, and establish the overall visual style.

HTML

You can easily integrate any monochrome Pictogram or duotone Pictogram plus from the VUD library into your product.

To add a monochrome Pictogram, insert a <span> tag with the class visma-pictogram followed by an additional class representing the specific pictogram type. Similarly, for a pictogram plus, use the class visma-pictogram-plus along with a specific pictogram class.

Here are examples of how to use the base classes to create monochrome Pictograms and Pictogram plus:

Pictograms


                                                        
                                                        
                                                            <span aria-hidden="true" class="visma-pictogram visma-pictogram-user-search"></span>

Storybook failed to load. Please connect to the VPN to access.

The monochrome Pictograms are imported as SVG masks and can change colour by adding a custom value to the --ref-pictogram-primary-stroke-default overwriting token.

Pictogram plus


                                                        
                                                        
                                                            <span aria-hidden="true" class="visma-pictogram-plus visma-pictogram-plus-user-search"></span>

Storybook failed to load. Please connect to the VPN to access.

Pictogram Plus icons are imported as SVG image backgrounds and cannot be altered or customised with colour variants.

Colour variants

The VUD library offers two helper classes for creating colour variants from the default setting. Though these classes initially match the default colour, you can customise them by modifying specific overwriting tokens:

For .visma-pictogram-secondary, use the --ref-pictogram-secondary-stroke-default token

For .visma-pictogram-tertiary, use the --ref-pictogram-tertiary-stroke-default token


                                                        
                                                        
                                                            <span aria-hidden="true" class="visma-pictogram visma-pictogram-tertiary visma-pictogram-user-search"></span>

VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.

Pictograms

HTML

Pictograms

Pictogram plus

Colour variants

VUD Product Design System

Resources

Support