Documentation versions (currently viewingVaadin 14)

You are viewing documentation for an older Vaadin version. View latest documentation

These icons are designed to fit in with the default theme style.

Open in a
new tab
import '@vaadin/vaadin-lumo-styles/icons';
import './lumo-tokens';
import './icons-preview';

export default class LumoIcons extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<icons-preview name="lumo"></icons-preview>`;

customElements.define('lumo-icons', LumoIcons);

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 – giving a 16×16 pixel active area for the icon itself – allowing for optimizing each icon for visual/optical balance.


In server-side views (Flow/Java):

Icon icon = new Icon("lumo", "photo");


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 – the M size fits that by default.

Description CSS Custom Property

Large icon


Medium icon
Default size


Small icon