The Office for the Coordination of Humanitarian Affairs (OCHA) has established icons to represent humanitarian assistance and to ensure consistency in use, these have been shared widely with UN agencies and NGOs. On this section we have listed those OCHA icons that WFP uses most frequently in addition to a few WFP-specific ones.
Each icon is available in either a positive (transparent) or a negative (solid) background, to suit your needs.
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.
Bower
<!-- For modern browsers with SVG support -->
<link rel="stylesheet" href="bower_components/wfp-ui/dist/assets/icons/thematic/thematic-icons.svg.css">
<!-- For browsers without SVG support -->
<link rel="stylesheet" href="bower_components/wfp-ui/dist/assets/icons/thematic/thematic-icons.png.css">
<!-- IE8-9 Fallback -->
<link rel="stylesheet" href="bower_components/wfp-ui/dist/assets/icons/thematic/thematic-icons.fallback.css">CDN
<!-- For modern browsers with SVG support -->
<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/icons/thematic/thematic-icons.svg.css">
<!-- For browsers without SVG support -->
<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/icons/thematic/thematic-icons.png.css">
<!-- IE8-9 Fallback -->
<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/icons/thematic/thematic-icons.fallback.css">Add thematic icons to your website using <span> element with a class thematic-{icon-name}, where {icon-name} means a corresponding name of an icon, listed in a preview below (or in the package).
Example
<span class="thematic-affected-population-pos"></span>
<span class="thematic-affected-population-neg"></span>Preview
Notice
Need a Thematic icon not listed here? Send us a request via wfp.publications@wfp.org.
-
affected-population-neg -
affected-population-pos -
aids-neg -
aids-pos -
airport-neg -
airport-pos -
beneficiary-neg -
beneficiary-pos -
capacity-building-neg -
capacity-building-pos -
cash-neg -
cash-pos -
civil-military-coordination-neg -
civil-military-coordination-pos -
conflict-neg -
conflict-pos -
contact-neg -
contact-pos -
drought-neg -
drought-pos -
earthquake-neg -
earthquake-pos -
emergency-response-neg -
emergency-response-pos -
emergencytelecom-neg -
emergencytelecom-pos -
evacuation-neg -
evacuation-pos -
evaluation-neg -
evaluation-pos -
floods-neg -
floods-pos -
food-distribution-neg -
food-distribution-pos -
food-for-assets-neg -
food-for-assets-pos -
food-neg -
food-pos -
food-security-cluster-neg -
food-security-cluster-pos -
gender-neg -
gender-pos -
logistics-cluster-neg -
logistics-cluster-pos -
medical-evacuations-neg -
medical-evacuations-pos -
monitoring-neg -
monitoring-pos -
nutrition-cluster-neg -
nutrition-cluster-pos -
p4p-neg -
p4p-pos -
partnership-neg -
partnership-pos -
population-displacement-neg -
population-displacement-pos -
population-return-neg -
population-return-pos -
power-plant-neg -
power-plant-pos -
procurement-neg -
procurement-pops -
protection-neg -
protection-pos -
public-information-neg -
public-information-pos -
refugee-camp-neg -
refugee-camp-pos -
resourcing-neg -
resourcing-pos -
school-feeding-neg -
school-feeding-pos -
security-neg -
security-pos -
ship-neg -
ship-pos -
truck-neg -
truck-pos -
vam-neg -
vam-pos -
voucher-neg -
voucher-pos -
warehouse-neg -
warehouse-pos