Lumo Icons

Lumo comes with a set of icons that are designed to fit in with the default Lumo style.

Available Icons

You can browse the icon set in the latest documentation.

Icons 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 <b>M size</b> fits that by default.

You need to import the style sheet for Sizing and Spacing to use the sizing properties.

--lumo-icon-size-s: 1.25em

--lumo-icon-size-m: 1.5em

--lumo-icon-size-l: 2.25em

Examples

SVG sprites

The SVG sprites are used with the iron-icon element.

HTML

  1. <script type="module">
  2.   import '@vaadin/vaadin-lumo-styles/icons.js';
  3. </script>

HTML

  1. <iron-icon icon="lumo:edit"></iron-icon>
  2. <iron-icon icon="lumo:cog"></iron-icon>
  3. <iron-icon icon="lumo:search"></iron-icon>

Advanced usage

If you need to be in control of when or how iron-icon is imported, you may import iconset.html (instead of icons.html) to import only the icon definitions (iron-iconset-svg) without automatically importing the iron-icon element.

HTML

  1. <script type="module">
  2.   import '@vaadin/vaadin-lumo-styles/iconset.js';
  3. </script>

Font icons

Note, that the use of SVG icons is preferable over font icons. There are well documented caveats when using font icons.

HTML

  1. <script type="module">
  2.   import '@vaadin/vaadin-lumo-styles/font-icons.js';
  3. </script>

HTML

  1. <span class="font-icon edit"></span>
  2. <span class="font-icon cog"></span>
  3. <span class="font-icon search"></span>
  5. <custom-style>
  6.   <style>
  7.     .font-icon {
  8.       font-family: lumo-icons;
  9.       font-size: var(--lumo-icon-size-m);
  10.     }
  11.     .font-icon.edit::before {
  12.       content: var(--lumo-icons-edit);
  13.     }
  14.     .font-icon.cog::before {
  15.       content: var(--lumo-icons-cog);
  16.     }
  17.     .font-icon.search::before {
  18.       content: var(--lumo-icons-search);
  19.     }
  20.   </style>
  21. </custom-style>

Icon size

HTML

  1. <script type="module">
  2.   import '@vaadin/vaadin-lumo-styles/sizing.js';
  3. </script>

HTML

  1. <h5>SVG</h5>
  2. <iron-icon icon="lumo:edit" class="size-s"></iron-icon>
  3. <iron-icon icon="lumo:edit" class="size-m"></iron-icon>
  4. <iron-icon icon="lumo:edit" class="size-l"></iron-icon>
  6. <h5>Font icon</h5>
  7. <span class="font-icon size-s"></span>
  8. <span class="font-icon size-m"></span>
  9. <span class="font-icon size-l"></span>
  11. <custom-style>
  12.   <style>
  13.     .font-icon {
  14.       font-family: lumo-icons;
  15.       font-size: var(--lumo-icon-size-m);
  16.       vertical-align: middle;
  17.     }
  18.     .font-icon::before {
  19.       content: var(--lumo-icons-search);
  20.     }
  21.     /* Control iron-icons with width and height */
  22.     iron-icon.size-s {
  23.       width: var(--lumo-icon-size-s);
  24.       height: var(--lumo-icon-size-s);
  25.     }
  26.     iron-icon.size-m {
  27.       width: var(--lumo-icon-size-m);
  28.       height: var(--lumo-icon-size-m);
  29.     }
  30.     iron-icon.size-l {
  31.       width: var(--lumo-icon-size-l);
  32.       height: var(--lumo-icon-size-l);
  33.     }
  34.     /* Control font icons with font-size */
  35.     .font-icon.size-s {
  36.       font-size: var(--lumo-icon-size-s);
  37.     }
  38.     .font-icon.size-m {
  39.       font-size: var(--lumo-icon-size-m);
  40.     }
  41.     .font-icon.size-l {
  42.       font-size: var(--lumo-icon-size-l);
  43.     }
  44.   </style>
  45. </custom-style>