Vexel Icons for Vue

A high-performance, tree-shakeable SVG icon library for Vue 3. Each icon is an individual ES module — your bundle only includes the icons you actually use.

Installation

npm install vexel-icons-vue

yarn add vexel-icons-vue

pnpm add vexel-icons-vue

Quick Start

<script setup>
import { RoundedStrokeAdd01Icon, RoundedSolidCancelCircleIcon } from 'vexel-icons-vue'
</script>

<template>
  <RoundedStrokeAdd01Icon />
  <RoundedSolidCancelCircleIcon :size="32" color="#e74c3c" />
</template>

Usage

Basic Usage

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

<script setup>
import { RoundedStrokeDelete01Icon } from 'vexel-icons-vue'
</script>

<template>
  <RoundedStrokeDelete01Icon />
</template>

Customizing Icons

Every icon accepts three props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| string | 24 | Width and height in pixels | | color | string | currentColor | Icon color (inherits text color by default) | | strokeWidth | number \| string | 1.5 | Stroke width (applies to stroke-based icons) |

<template>
  <!-- Change size -->
  <RoundedStrokeAdd01Icon :size="48" />

  <!-- Change color -->
  <RoundedStrokeAdd01Icon color="#3498db" />

  <!-- Change stroke width -->
  <RoundedStrokeAdd01Icon :stroke-width="2" />

  <!-- Combine all props -->
  <RoundedStrokeAdd01Icon :size="32" :stroke-width="2.5" color="red" />
</template>

Inheriting Color from Parent

Since the default color is currentColor, icons automatically inherit the text color:

<template>
  <button style="color: #3498db;">
    <RoundedStrokeAdd01Icon /> Add Item
  </button>
</template>

Direct Imports (Recommended for Large Projects)

For the best possible tree-shaking and build performance, import icons directly by path:

<script setup>
import RoundedStrokeAdd01Icon from 'vexel-icons-vue/icons/RoundedStrokeAdd01Icon'
</script>

<template>
  <RoundedStrokeAdd01Icon :size="24" />
</template>

This completely bypasses the barrel index file — ideal when using hundreds of icons.

Dynamic Icon Rendering

Render icons dynamically using Vue's <component> tag:

<script setup>
import { shallowRef } from 'vue'
import { RoundedStrokeAdd01Icon, RoundedStrokeRemove01Icon } from 'vexel-icons-vue'

const currentIcon = shallowRef(RoundedStrokeAdd01Icon)

function toggleIcon() {
  currentIcon.value = currentIcon.value === RoundedStrokeAdd01Icon
    ? RoundedStrokeRemove01Icon
    : RoundedStrokeAdd01Icon
}
</script>

<template>
  <component :is="currentIcon" :size="24" @click="toggleIcon" />
</template>

Creating an Icon Wrapper Component

Wrap icons with your own defaults:

<!-- AppIcon.vue -->
<script setup>
defineProps({
  icon: { type: Object, required: true },
  size: { type: [Number, String], default: 20 },
  color: { type: String, default: 'currentColor' },
  strokeWidth: { type: [Number, String], default: 1.5 },
})
</script>

<template>
  <component :is="icon" :size="size" :color="color" :stroke-width="strokeWidth" />
</template>

<script setup>
import AppIcon from './AppIcon.vue'
import { RoundedStrokeDelete01Icon } from 'vexel-icons-vue'
</script>

<template>
  <AppIcon :icon="RoundedStrokeDelete01Icon" :size="16" color="red" />
</template>

Icon Naming Convention

Icon names follow this pattern:

{Style}{Variant}{IconName}Icon

Styles:

• Rounded — Rounded corners and edges
• Standard — Default geometric style
• Sharp — Sharp, angular edges

Variants:

• Stroke — Outlined icons (supports strokeWidth prop)
• Solid — Filled icons
• Duotone — Two-layer stroke icons with depth
• Twotone — Stroke icons with an opacity layer
• Bulk — Solid icons with an opacity layer

Examples:

RoundedStrokeAdd01Icon
StandardSolidCancelCircleIcon
SharpStrokeDelete02Icon
RoundedDuotoneWasteIcon
RoundedBulkRestoreBinIcon
RoundedTwotoneEraser01Icon

Available Icon Categories

• add-01, add-02 — Plus/add icons
• add-circle, add-circle-half-dot — Circled add icons
• add-square — Squared add icons
• remove-01, remove-02 — Minus/remove icons
• remove-circle, remove-circle-half-dot — Circled remove icons
• remove-square — Squared remove icons
• cancel-01, cancel-02 — X/cancel icons
• cancel-circle, cancel-circle-half-dot — Circled cancel icons
• cancel-square — Squared cancel icons
• delete-01, delete-02, delete-03, delete-04 — Trash/delete icons
• delete-put-back, delete-throw — Delete action icons
• diamond-minus, diamond-plus — Diamond-shaped plus/minus
• eraser-01, eraser-add — Eraser icons
• restore-bin, waste, waste-restore — Bin and restore icons
• unavailable — Unavailable/blocked icons

More categories coming soon.

TypeScript Support

Full TypeScript support is included out of the box. All icon components are typed with their props:

import type { DefineComponent } from 'vue'
import { RoundedStrokeAdd01Icon } from 'vexel-icons-vue'

// Type is automatically inferred
// Props: { size?: number | string, color?: string, strokeWidth?: number | string }

Performance

• Tree-shakeable: Only imported icons are included in your bundle
• Individual ES modules: Each icon is a separate .mjs file (~200-600 bytes)
• Shared runtime: All icons share a single 540-byte createIcon function
• No dependencies: Only requires Vue 3 as a peer dependency
• Computed reactivity: Color and stroke-width replacements use Vue's computed for optimal re-rendering

Bundle impact example: | Icons imported | Added to your bundle | |---|---| | 1 icon | ~1 KB | | 10 icons | ~5 KB | | 50 icons | ~25 KB |

Compatibility

• Vue 3.2+
• Works with Vite, Webpack, Rollup, Nuxt 3, and any Vue 3 compatible bundler
• ESM only (modern bundlers)

License

MIT