vexICONS

Custom React icon library with 81 hand-crafted icons. All icons are designed on a 24×24 grid with 2px stroke width.

Installation

npm install vexicons
# or
pnpm add vexicons
# or
yarn add vexicons

Usage

import { VexHome, VexSearch, VexUser } from 'vexicons'

function App() {
  return (
    <div>
      <VexHome />
      <VexSearch size={32} />
      <VexUser size={20} stroke="red" />
    </div>
  )
}

Props

All icons accept standard SVG props plus:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| string | 24 | Width and height of the icon | | stroke | string | currentColor | Stroke color | | strokeWidth | number | 2 | Stroke width | | className | string | — | CSS class name |

Available Icons (81)

Interface

VexHome VexSearch VexGear VexUser VexMenu VexClose VexCheck VexPlus VexMinus VexLock VexCopy VexAlertTriangle VexInfo VexHelp VexGrid VexLayout VexSliders

Arrows

VexArrowDown VexArrowLeft VexArrowRight VexArrowUp

Communication

VexBell VexMail VexPhone VexMessage

Objects

VexHeart VexStar VexCalendar VexClock VexBookmark VexLink VexMap VexPin VexTag VexGlobe VexPrinter VexMonitor VexSmartphone VexLaptop VexAward

Actions

VexTrash VexEdit VexEye VexEyeOff VexDownload VexUpload VexRefresh VexShare VexFilter VexSort VexZoomIn VexZoomOut VexSend VexThumbsUp VexThumbsDown VexScissors VexCrop VexTrendingUp

Media

VexImage VexFile VexFolder VexCamera VexMicrophone VexVolume VexVolumeOff VexPlay VexPause VexStop VexSkipForward VexSkipBack

System

VexSun VexMoon VexCloud VexWifi VexBattery

Development

VexCode VexTerminal VexServer VexDatabase VexGitBranch VexPackage

Create Custom Icons

Use the createIcon helper to build your own icons with the same consistent style and props:

import { createIcon } from 'vexicons'

const MyCustomIcon = createIcon(
  <>
    <circle cx="12" cy="12" r="10" />
    <path d="M12 6v6l4 2" />
  </>
)

// Accepts all standard props: size, stroke, strokeWidth, className, etc.
<MyCustomIcon size={28} stroke="#a855f7" />

Design System

• Grid: 24×24
• Stroke width: 2px
• Line cap / join: round
• Fill: none (stroke-only)
• Color: currentColor — inherits from parent text color automatically

License

MIT © vextm