Skip to content
Velkin LogoVelkin Logo
Velkin
VELKIN/UI

Modern UI components for product teams and their AI agents. Lit core, typed wrappers, live MCP.

sales@velkinui.com

Product

  • Docs
  • Components
  • Studio
  • Pricing

Resources

  • Quick start
  • Blog
  • Changelog
  • Roadmap
  • Status

Project

  • About
  • Contact
  • License
  • Privacy
  • Terms

© 2026 Velkin. MIT core · Pro licenses available.

VELKIN

Icon

An icon component with offline sets, lazy loading, and SVG fallback.

vu-icon · @velkin/react/icon

Copy page

Import

React
npm i @velkin/react

import { VuIcon } from "@velkin/react/icon";

Examples

API

Props

PropTypeDefaultDescription
iconstring""Icon name in `prefix:icon-name` format.
widthVuIconSizeValue""Icon width. Default: `1em` when height is also unset.
heightVuIconSizeValue""Icon height. Default: `1em` when width is also unset.
colorstring"currentColor"Icon color. Default: `"currentColor"`.
inlinebooleanfalseInline alignment tweak for text contexts. Default: `false`.
flipVuIconFlip""Flip transform descriptor.
hFlipbooleanfalseHorizontal flip shortcut. Default: `false`.
vFlipbooleanfalseVertical flip shortcut. Default: `false`.
rotateVuIconRotateValue"0"Rotation descriptor (quarter turns or `deg`).
lazybooleanfalseDefers loading until visible. Default: `false`.

Slots

SlotDescription
—- Fallback `<svg>` when remote/local icon data is unavailable.

CSS parts

PartDescription
iconIcon container wrapping the SVG or slot.

Methods

MethodDescription
registerLocalSet- Registers a local Iconify set for offline/custom usage.
registerLocalIcon- Registers a single local icon override.

Types

NameDefinition
VuIconFlip
"" | "horizontal" | "vertical" | "horizontal,vertical"
VuIconRotateValue
string | number
VuIconSizeValue
string | number

Related

Data display

  • AvatarAn avatar component with image, initials, icon, or custom content.
  • Avatar GroupAn avatar group component that stacks overlapping avatars.
  • BadgeA badge component for counts, status dots, and overlay marks.
  • ChipA chip component for tags and filters with dismiss or toggle actions.
  • Data TableA data table component with sorting, filtering, and selection.
  • DividerA divider component for horizontal or vertical layout separation.

Guides

  • AppearanceShared visual props
  • EventsSelection and change events

Browse

  • Previous: FlowEarlier in the sidebar
  • Next: ImageLater in the sidebar
  • All componentsBrowse the full index