Warp Design System

Appearance

Icons ​

Warp's icon set is designed to help users understand actions and information, and to draw attention to elements.

Warp icon library contains of ~300 icons in sizes 16px, 24px and 32px. It's based on the Streamline icon library with more than 17.000 icons.

React

released

Vue

released

Elements

released

Android

released

iOS

released

Need new icons? ​

If you need a new icon or adjustments to an existing one, please make a request in #nmp-warp-design-system in Slack.

Usage ​

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.

Internationalization ​

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.

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

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 to open usage modal.

Frameworks ​

Import ​

Import React icons individually to optimize your JS bundle size by adding only the icons you need:

js
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 ​

jsx
<IconBag16 />

Check out exact imports in the Examples section.

Colors ​

The color of the icon will default to currentColor. Colors can be changed using semantic color classes for icons.

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 iconNew icon
AlertWarningWarning
AlertErrorError
AlertSuccessSuccess
AlertInfoInfo
BankIdBankIdNo
BankIdentCheckShield
Car42Minivan
FavoriteHeart
FileFileAdd
Honk42HonkLight
MarketSofa
Nettbil42NettbilLight
RatingEmptyStarEmpty
RatingFullStarFull
RatingHalfStarHalf
Paw16AnimalPaw
Paw24AnimalPaw
Paw32AnimalPaw
PhoneNewPhone
TableSortUpArrowUp
TableSortDownArrowDown
TorgetBrowserBrowser
TorgetDeliveryDelivery
TorgetHeadsetHeadset
TorgetLampLamp
TorgetShippingShipping
TorgetUsersUserGroup
TorgetVerifiedVerified
TorgetShoppingShoppingCart
TorgetMixerMixer
TriangleWarning
TableInfoInfo