Icons
- Lumo Icons
- Vaadin Icons
These icons are designed to fit in with the default theme style.
The icons are drawn on a 24×24 pixel canvas. Each 24×24 canvas has a safe area of approximately 4 pixels around the icon. This gives a 16×16 pixel active area for the icon itself, which allows the icon to be optimized for visual/optical balance.
Size
Use the icon size custom properties to set consistent sizes for all icons across your application.
The Lumo icons are drawn on a 24×24 pixel canvas, which the M
size fits by default.
In a non-Vaadin application, you need to import the sizing style sheet to use the sizing properties.
import '@vaadin/vaadin-lumo-styles/sizing.js';
Description | CSS Custom Property |
---|---|
Large icon | --lumo-icon-size-l: |
Medium icon | --lumo-icon-size-m: |
Small icon | --lumo-icon-size-s: |