Vaadin Icons

630+ unique icons designed for web applications
 
Download and start using Vaadin Icons for free!
Download Vaadin Icons

The Icon Files package contains the icons in three different formats: font files, SVG images and PNG images. They are found under the assets directory in the package.

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>