Skip to content

Icons

45 icons designed to match the war.market brand.

Style

  • Warm gray strokes (#4a4752)
  • Amber (#f97316) / gold (#fbbf24) accents
  • Profit green (#22c55e) / loss red (#ef4444) where appropriate
  • Rounded caps and joins
  • 64x64 viewBox, scales to any size

Full set

IconNameUse
chevron-leftchevron-leftBack
chevron-rightchevron-rightForward
chevron-upchevron-upExpand
chevron-downchevron-downCollapse
menumenuMenu
closecloseClose, dismiss
externalexternalExternal link

Trading

IconNameUse
chartchartMarkets, trends
candlecandlePrice chart
executeexecuteTrade action
positionpositionPortfolio
targettargetThesis
layerslayersBaskets

Status

IconNameUse
arrow-uparrow-upProfit
arrow-downarrow-downLoss
trending-uptrending-upPositive trend
trending-downtrending-downNegative trend
checkcheckSuccess
warningwarningAlert
infoinfoInformation

Wallet & Auth

IconNameUse
walletwalletConnect
locklockLocked
unlockunlockUnlocked
shieldshieldSecurity
linklinkConnected
disconnectdisconnectDisconnect

Finance

IconNameUse
dollardollarMoney
percentpercentLeverage, rates

Actions

IconNameUse
refreshrefreshRefresh
copycopyCopy
searchsearchSearch
sendsendSend
plusplusAdd
minusminusRemove
settingssettingsSettings

Utility

IconNameUse
eyeeyeVisible
eye-offeye-offHidden
bellbellNotifications
clockclockTime
historyhistoryHistory
globeglobeGlobal
bookbookDocs
flagflagGeopolitical

Brand

IconNameUse
flameflameEnergy
diamonddiamondValue

Usage

Direct SVG

html
<img src="https://war.market/icons/chart.svg" width="24" height="24" alt="" />

React component

tsx
import { IconChart, IconWallet } from '@/components/WarIcons';

<IconChart size={24} />
<IconWallet size={32} className="opacity-60" />

Download

All icons available at:

https://war.market/icons/{name}.svg

Or browse the folder:

/public/icons/

Don'ts

  • Don't change the colors
  • Don't mix with other icon sets
  • Don't add effects (shadows, glows)
  • Don't use at sizes below 16px

Trade the tension.