Vaadin comes with two built-in icon sets:
- Lumo Icons
The Lumo Icons are designed to fit in with the default Lumo theme style. They are drawn on a 24×24 pixel canvas with a 16×16 pixel active area for the icon itself and a safe area of 4 pixels around the icon, allowing for better visual balance across the icons.
- Vaadin Icons
The Vaadin Icons are drawn on a 16×16 pixel canvas, and have no safe area around the icon. By default, the
<vaadin-icon>component renders icons on a 24×24 pixel canvas, so Vaadin Icons are scaled up and look bigger than the Lumo icons.
Icon lumoIcon = new Icon("lumo", "photo"); Icon vaadinIcon = new Icon(VaadinIcon.PHONE); add(lumoIcon, vaadinIcon);
The icons are rendered as an inline
<svg> element inside the shadow root of a
<vaadin-icon> element, allowing you to style them using CSS.