Vaadin Icons is a set of 600+ icons designed for web applications.

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

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

customElements.define('vaadin-icons', VaadinIcons);

The icons are drawn on a 16×16 pixel canvas.


In server-side views (Flow/Java):

Icon icon = new Icon(VaadinIcon.PHONE);

In client-side views (Fusion/TypeScript):

import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@vaadin/icon';
import '@vaadin/icons';

export class PhoneIconExample extends LitElement {
  render() {
    return html`<vaadin-icon icon="vaadin:phone"></vaadin-icon>`;