UI Icons

User Interface Icons should be used to strengthen visual cues; use them wisely and do not overload the interface with icons.

Usually an icon should be shown accompanied by a corresponding text label, for the benefit of users who are unfamiliar with the icon.

Each icon is available in either a dark or a light fill.

Usage

First thing to do, is to load the icons to your web site or application, by referencing it in <head> section. There are three stylesheets to choose from, depending on what browsers you intend on supporting. Two primary files use base64 encoded SVGs and PNGs, while the third file relies on old-school background-image: url() fallback to PNGs available from the filesystem.

You can check support for base64 and SVG in CSS support on caniuse.com.

<!-- For modern browsers with SVG support -->
<link rel="stylesheet" href="bower_components/wfp-ui/dist/assets/icons/ui/ui-icons.svg.css">
<!-- For browsers without SVG support -->
<link rel="stylesheet" href="bower_components/wfp-ui/dist/assets/icons/ui/ui-icons.png.css">
<!-- IE8-9 Fallback -->
<link rel="stylesheet" href="bower_components/wfp-ui/dist/assets/icons/ui/ui-icons.fallback.css">

Add UI icons to your interfaces using <span> element with a class icon-{icon-name}, where {icon-name} means a corresponding name of the icon listed in a preview below (or in the package).

<span class="icon-account-circle-dark"></span>

Notice

UI icons can be used alongside other UI elements; within menus, buttons, etc, as long as there is a descriptive label next to it. Do not use icons on their own on actionable UI elements, such as links or buttons.

Preview
<nav class="wfp-menu">
  <h6 class="menu--heading">Navigation</h6>
  <ul class="menu--wrapper">
    <li class="menu--item">
      <a href="#" class="menu--link"><i class="icon-email-dark"></i> Inbox</a>
    </li>
    <li class="menu--item">
      <a href="#" class="menu--link"><i class="icon-account-circle-dark"></i> Account</a>
    </li>
    <li class="menu--item">
      <a href="#" class="menu--link"><i class="icon-exit-to-app-dark"></i> Sign Out</a>
    </li>
  </ul>
</nav>

Sizing

By default, all UI icons are displayed in 24 x 24px size. You can easily adjust that, using special sizing classes.

Sample Size Class
16px xsmall
24px (default) small
32px medium
48px large
64px xlarge

Available Icons

Notice

Need a User Interface icon not listed here? Send us a request via wfp.publications@wfp.org.

  • account-circle-dark
  • account-circle-light
  • add-circle-dark
  • add-circle-light
  • announcement-dark
  • announcement-light
  • archive-dark
  • archive-light
  • arrow-drop-down-dark
  • arrow-drop-down-light
  • arrow-drop-up-dark
  • arrow-drop-up-light
  • attach-file-dark
  • attach-file-light
  • attach-money-dark
  • attach-money-light
  • backspace-dark
  • backspace-light
  • block-dark
  • block-light
  • bug-report-dark
  • bug-report-light
  • cached-dark
  • cached-light
  • checkbox-checked-dark
  • checkbox-checked-light
  • checkbox-unchecked-dark
  • checkbox-unchecked-light
  • clear-dark
  • clear-light
  • credit-card-dark
  • credit-card-light
  • delete-dark
  • delete-light
  • done-dark
  • done-light
  • drafts-dark
  • drafts-light
  • email-dark
  • email-light
  • error-dark
  • error-light
  • exit-to-app-dark
  • exit-to-app-light
  • favorite-false-dark
  • favorite-false-light
  • favorite-true-dark
  • favorite-true-light
  • flag-dark
  • flag-light
  • grade-dark
  • grade-light
  • help-dark
  • help-light
  • highlight-remove-dark
  • highlight-remove-light
  • home-dark
  • home-light
  • https-dark
  • https-light
  • info-neg-dark
  • info-neg-light
  • info-pos-dark
  • info-pos-light
  • insert-emoticon-dark
  • insert-emoticon-light
  • live-help-dark
  • live-help-light
  • location-on-dark
  • location-on-light
  • lock-outline-dark
  • lock-outline-light
  • notifications-off-dark
  • notifications-off-light
  • notifications-on-dark
  • notifications-on-light
  • people-dark
  • people-light
  • person-dark
  • person-light
  • phone-dark
  • phone-light
  • query-builder-dark
  • query-builder-light
  • radio-button-off-dark
  • radio-button-off-light
  • radio-button-on-dark
  • radio-button-on-light
  • search-dark
  • search-light
  • settings-dark
  • settings-light
  • share-dark
  • share-light
  • speaker-notes-dark
  • speaker-notes-light
  • star-off-dark
  • star-off-light
  • star-on-dark
  • star-on-light
  • thumb-down-dark
  • thumb-down-light
  • thumb-up-dark
  • thumb-up-light
  • translate-dark
  • translate-light
  • visibility-dark
  • visibility-light