BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • App Icon
    • Awesome icons
    • Core Icons
    • Humanitarian Icons
    • Pictograms
icons

Core Icons

Colours for the WFP design system

Icons

We only provide basic user interface icons. For more advanced icons please take a look at FontAwesome.

Installing the icons package

npm install @wfp/icons-react

Using the icons in react

import { AddIcon } from "@wfp/icons-react";
<Add />;
Add
AddCircle
AddOutline
AngleDown
ArrowDown
ArrowLeft
ArrowRight
ArrowUp
Arrows
BackToTop
CalendarAltRegular
CaretDown
CaretDownLegacy
CaretLeft
CaretRight
CaretUp
Check
Checkmark
CheckmarkCircle
CheckmarkOutline
ChevronDown
ChevronDownLegacy
ChevronLeft
ChevronRight
ChevronUp
Close
CloseCircle
CloseOutline
Cross
Delete
Download
Draggable
EditGlyph
Ellipsis
Error
ErrorSolid
Facebook
Favorite
FavoriteOutline
FavoriteSolid
Female
Filter
HeaderAvatar
HeaderChevron
HeaderSearch
Help
HelpGlyph
HelpOutline
Home
Info
InfoCircle
InfoOutline
InfoSolid
Instagram
LinkedIn
Locked
Male
Menu
OverflowMenu
Play
Print
Search
SearchSolid
Settings
StarSolid
Subtract
SubtractOutline
TikTok
Twitter
Upload
User
WarningAlt
WarningFilled
WarningOutline
WarningSolid
WfpLogoAcronym
WfpLogoEmblem
WfpLogoExtendedEn
WfpLogoStandardBlackEn
WfpLogoVerticalEn
YouTube

Reference

  • OCHA Icons

On this page

  • Installing the icons package
  • Using the icons in react
  • Reference

References

  • Figma
  • npm
Storybook
Figma library
Contact us
2025 © World Food Programme