> Markdown version of [Icons](https://vaadin.com/docs/v14/ds/foundation/icons). Section index: [llms.txt](https://vaadin.com/docs/v14/ds/llms.txt)

# Lumo Icons

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

`lumo-icons.ts`

```typescript
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.

## <a id="usage"></a>Usage

In server-side views (Flow/Java):

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

## <a id="size"></a>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 – the **M size** fits that by default.

| Description                  | CSS Custom Property |
| ---------------------------- | ------------------- |
| **Large icon**               | --lumo-icon-size-l  |
| **Medium icon** Default size | --lumo-icon-size-m  |
| **Small icon**               | --lumo-icon-size-s  |