Material icons

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.

See the full set of material design icons at the material icons library.

Example:


<!-- For modern browsers. -->
<i class="material-icons">home</i>
<!-- For IE9 or below. -->
<i class="material-icons">&#xE88A;</i>

<!-- For modern browsers. -->
<i class="material-icons">security</i>
<!-- For IE9 or below. -->
<i class="material-icons">&#xE32A;</i>

<!-- For modern browsers. -->
<i class="material-icons">comment</i>
<!-- For IE9 or below. -->
<i class="material-icons">&#xE0B9;</i>

Sizes:


<i class="material-icons">&#xE554;</i>

<i class="material-icons md-24">&#xE554;</i>

<i class="material-icons md-36">&#xE554;</i>

<i class="material-icons md-48">&#xE554;</i>

Colors:


<i class="material-icons md-36 uk-text-primary">&#xE156;</i>

<i class="material-icons md-36 uk-text-success">&#xE156;</i>

<i class="material-icons md-36 uk-text-danger">&#xE156;</i>

<i class="material-icons md-36 uk-text-warning">&#xE156;</i>

UIKit Icons (Font Awesome)

This component is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 300 symbols and glyphs for web-related actions. Icon fonts are great, because they enable you to easily change color, size and more via CSS. They are scalable vector graphics, which means that they look great on high-resolution displays.

See the full set of uikit icons

Example:

<i class="uk-icon-bar-chart-o uk-icon-medium"></i>
<i class="uk-icon-cutlery uk-icon-medium"></i>
<i class="uk-icon-sliders uk-icon-medium"></i>

Sizes:

<i class="uk-icon-file-picture-o"></i>
<i class="uk-icon-file-picture-o uk-icon-small"></i>
<i class="uk-icon-file-picture-o uk-icon-medium"></i>
<i class="uk-icon-file-picture-o uk-icon-large"></i>

Spin modifier:

<i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i>
<i class="uk-icon-refresh uk-icon-medium uk-icon-spin"></i>

Flag Icons 

<i class="flag-[country code eg. GB, US]"></i>

Payment Icons

Colors

Sidebar

Layout

Main menu accordion