Icons
Warp's icon set is designed to help users understand actions, information and draw attention to elements.
React
releasedVue
releasedElements
releasedAndroid
unsupportediOS
unsupportedQuestions?
Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system
Frameworks
Import
Import React icons individually to optimize your JS bundle size by adding only the icons you need:
import IconBag16 from '@warp-ds/icons/react/bag-16';Don't import icons directly from the @warp-ds/icons/react package, since this will add every Warp icon, and bloat your bundle.
Syntax
<IconBag16 />Check out exact imports below in our Examples section
Colors
The color of the icon will default to currentColor. Colors can be changed using semantic color classes for icons.
Typescript support
Starting from @warp-ds/icons@1.3.0, We are fully typescript compliant. You'll need to switch to module & moduleResolution as NodeNext. You can read more about it here
Setup
Since warp components are internationalised, you'd need to either set NMP_LANGUAGE for server-side rendering of the component, or set html document lang with a two-letter-code, eg: <html lang="en">. The server-side variable is read as process.env.NMP_LANGUAGE so you could either define this in your package.json script, or use .env files to leverage dotenv.
Examples
The following icons are available in the latest version of @warp-ds/icons package. Check the Deprecated icons section if you're migrating from previous major versions or from @fabric-ds/icons.
Click any icon tile to open usage modal:
Deprecated icons
In @warp-ds/icons v2.0.0 some icons were renamed or deleted as they had similarly looking equivalents. Below you can find a list of icons and their respective replacements.
| Old icon | New icon |
|---|---|
AlertWarning | Warning |
AlertError | Error |
AlertSuccess | Success |
AlertInfo | Info |
BankId | BankIdNo |
BankIdent | CheckShield |
Car42 | Minivan |
Favorite | Heart |
File | FileAdd |
Honk42 | HonkLight |
Market | Sofa |
Nettbil42 | NettbilLight |
RatingEmpty | StarEmpty |
RatingFull | StarFull |
RatingHalf | StarHalf |
Paw16 | AnimalPaw |
Paw24 | AnimalPaw |
Paw32 | AnimalPaw |
PhoneNew | Phone |
TableSortUp | ArrowUp |
TableSortDown | ArrowDown |
TorgetBrowser | Browser |
TorgetDelivery | Delivery |
TorgetHeadset | Headset |
TorgetLamp | Lamp |
TorgetShipping | Shipping |
TorgetUsers | UserGroup |
TorgetVerified | Verified |
TorgetShopping | ShoppingCart |
TorgetMixer | Mixer |
Triangle | Warning |
TableInfo | Info |