Icons

Powered byVexel Icons

49,000+ pixel-perfect SVG icons across 60 categories and 5 styles. Included with VeloxUI — zero extra install needed.

• 3 shapes: Rounded, Standard, Sharp
• 5 styles: Stroke, Solid, Duotone, Twotone, Bulk
• CDN-powered: Icons load on-demand, cached in localStorage
• Tree-shakeable: Only icons you import are bundled
• Typed: Full TypeScript support

Installation

Vexel Icons is bundled as a dependency of VeloxUI. When you install VeloxUI, you get icons automatically:

npm install veloxui
# vexel-icons is included as a dependency

Or install icons separately:

npm install vexel-icons

Usage

Import any icon by name and use it as a Vue component:

<script setup>
import { RoundedStrokeHome01Icon, RoundedSolidStarIcon } from 'vexel-icons'
</script>

<template>
  <RoundedStrokeHome01Icon :size="24" color="currentColor" />
  <RoundedSolidStarIcon :size="20" color="#f59e0b" />
</template>

Icon naming pattern

{Shape}{Style}{Name}Icon

Part	Options
Shape	Rounded, Standard, Sharp
Style	Stroke, Solid, Duotone, Twotone, Bulk
Name	Icon name (e.g. Home01, Search01, User)

Example: RoundedStrokeHome01Icon, SharpSolidLockIcon, StandardDuotoneMailIcon

Props

Prop	Type	Default	Description
size	number | string	24	Icon width and height
color	string	'currentColor'	Icon color
stroke-width	number | string	1.5	Stroke width (for stroke style)

Stroke Style

<script setup>
import {
  RoundedStrokeHome01Icon,
  RoundedStrokeSearch01Icon,
  RoundedStrokeSettings01Icon,
  RoundedStrokeUserIcon,
  RoundedStrokeMail01Icon,
  RoundedStrokeLockIcon,
} from 'vexel-icons'
</script>

<template>
  <RoundedStrokeHome01Icon :size="24" />
  <RoundedStrokeSearch01Icon :size="24" />
  <RoundedStrokeSettings01Icon :size="24" />
  <RoundedStrokeUserIcon :size="24" />
  <RoundedStrokeMail01Icon :size="24" />
  <RoundedStrokeLockIcon :size="24" />
</template>

Solid Style

<script setup>
import {
  RoundedSolidHome01Icon,
  RoundedSolidStarIcon,
  RoundedSolidLockIcon,
} from 'vexel-icons'
</script>

<template>
  <RoundedSolidHome01Icon :size="24" />
  <RoundedSolidStarIcon :size="24" />
  <RoundedSolidLockIcon :size="24" />
</template>

Duotone Style

<script setup>
import {
  RoundedDuotoneHome01Icon,
  RoundedDuotoneStarIcon,
  RoundedDuotoneLockIcon,
} from 'vexel-icons'
</script>

<template>
  <RoundedDuotoneHome01Icon :size="24" />
  <RoundedDuotoneStarIcon :size="24" />
  <RoundedDuotoneLockIcon :size="24" />
</template>

Sizing

<RoundedStrokeHome01Icon :size="16" />
<RoundedStrokeHome01Icon :size="20" />
<RoundedStrokeHome01Icon :size="24" />
<RoundedStrokeHome01Icon :size="32" />
<RoundedStrokeHome01Icon :size="40" />
<RoundedStrokeHome01Icon :size="48" />

Custom Colors

<RoundedStrokeHome01Icon :size="28" color="#3b82f6" />
<RoundedStrokeStarIcon :size="28" color="#f59e0b" />
<RoundedSolidStarIcon :size="28" color="#f59e0b" />

Stroke Width

<RoundedStrokeHome01Icon :size="28" :stroke-width="1" />
<RoundedStrokeHome01Icon :size="28" :stroke-width="1.5" />
<RoundedStrokeHome01Icon :size="28" :stroke-width="2" />
<RoundedStrokeHome01Icon :size="28" :stroke-width="2.5" />

Use with VeloxUI Components

Icons work seamlessly with VeloxUI components:

<VxButton>
  <template #icon>
    <RoundedStrokeDownload01Icon :size="16" />
  </template>
  Download
</VxButton>

Icons work in alerts too!

<VxAlert type="info" title="Icons work in alerts too!">
  <template #icon>
    <RoundedDuotoneNotification01Icon :size="22" />
  </template>
</VxAlert>

All Categories

60 categories with 49,000+ icons. Browse the full collection at vexel-icons.vercel.app.

Add & RemoveAIAlertAnimationArrowsAwardBookmarkBuildingsBusinessCheckClothingCommunicationsCryptoDashboardDate & TimeDevicesDownload & UploadE-CommerceEditingEducationEmojisEnergyFiles & FoldersFilter & SortingFoodsFurnituresGamesGitGymHandsHierarchyHomeImage & CameraIslamicKitchenLayoutLegalLink & UnlinkLogin & LogoutLogisticsLogosMapsMathematicsMediaMedicalMenuMouseNotes & TasksPresentationProgrammingScience & TechSearchSecuritySettingsShapesSpaceUsersWeatherWifi