• Icons
• Getting started
• About
• License

Download Vaadin Icons

Examples

HTML

1. Download and unpack the Icon Files package and copy the font files from assets/fonts/ to a directory in your project, for example fonts.
2. Declare the new font family in CSS:

   
   @font-face {
       font-family: 'Vaadin-Icons';
       src: url('fonts/Vaadin-Icons.eot');
       src: url('fonts/Vaadin-Icons.eot?#iefix') format('embedded-opentype'),
            url('fonts/Vaadin-Icons.woff') format('woff'),
            url('fonts/Vaadin-Icons.ttf') format('truetype'),
            url('fonts/Vaadin-Icons.svg#icomoon') format('svg');
   }

3. Declare icon class in CSS:

   
   .icon {
       font-family: Vaadin-Icons;
       font-size: 16px;
       speak: none;
       font-weight: normal;
       font-variant: normal;
       font-style: normal;
       text-transform: none;
       line-height: 1;
       -webkit-font-smoothing: antialiased;
   }

4. Use unicode characters in your HTML:

   
   <i class="icon">&#xe80d;</i>

   You can find icon unicodes from icon list.

Vaadin Icons Add-on

Vaadin Icons Add-on enables easy usage of Vaadin Icons in your Vaadin Framework apps.

1. Download the add-on from Vaadin Directory.
2. Use the icons in your Java code as follows:

   
   button.setIcon(VaadinIcons.VAADIN_V);
   

Polymer

1. Add vaadin-icons with bower install --save vaadin-icons
2. Import vaadin-icons and iron-icon

   
   <link rel="import" href="bower_components/iron-icon/iron-icon.html">
   <link rel="import" href="bower_components/vaadin-icons/vaadin-icons.html">
   

3. Use icon

   
   <iron-icon icon="vaadin-icons:vaadin-v"></iron-icon>