Icons

VelinStyle includes its own icon system powered by the <velin-icon> web component and an SVG sprite sheet.

Usage

<!-- Basic icon -->
<velin-icon name="heart" size="24"></velin-icon>

<!-- With color -->
<velin-icon name="star" size="20" class="velin-text-warning"></velin-icon>

<!-- Inside a button -->
<button class="btn btn-primary">
  <velin-icon name="download" size="16"></velin-icon> Download
</button>

Available Icons

VelinStyle ships with 200+ icons covering common UI needs:

arrow-up
arrow-down
arrow-left
arrow-right
check
x
plus
minus
search
menu
home
user
settings
heart
star
bell
mail
phone
camera
image
link
external-link
download
upload
copy
trash
edit
eye
moon
sun
github
twitter

See the full icon reference in the source SVG sprite for the complete list.

External Icon Providers

Since v0.8.0, <velin-icon> supports loading icons from external providers via CDN. Use the provider attribute:

<!-- Lucide icon -->
<velin-icon name="heart" provider="lucide"></velin-icon>

<!-- Heroicons -->
<velin-icon name="academic-cap" provider="heroicons"></velin-icon>

<!-- Bootstrap Icons -->
<velin-icon name="star-fill" provider="bootstrap"></velin-icon>

<!-- Material Symbols -->
<velin-icon name="home" provider="material"></velin-icon>

<!-- Tabler Icons -->
<velin-icon name="brand-github" provider="tabler"></velin-icon>

Supported Providers

Provider Key	Name	License	Homepage
`lucide`	Lucide Icons	ISC	lucide.dev
`heroicons`	Heroicons	MIT	heroicons.com
`bootstrap`	Bootstrap Icons	MIT	icons.getbootstrap.com
`material`	Material Symbols	Apache 2.0	fonts.google.com/icons
`fontawesome`	Font Awesome (Free)	CC BY 4.0	fontawesome.com
`tabler`	Tabler Icons	MIT	tabler.io/icons

Icons are fetched from CDN and cached in memory. If the CDN fails, VelinStyle falls back to the local sprite.

Custom Providers (JS API)

// Register your own provider at runtime
VelinIcon.registerProvider('myicons', 'https://mycdn.com/icons/{name}.svg');

// Then use it in HTML
// <velin-icon name="custom" provider="myicons"></velin-icon>

CLI Icon Management

The VelinStyle CLI provides commands to download and manage icons from external providers into your local SVG sprite:

# List available providers and installed icons
velinstyle icons list

# Download specific icons from a provider
velinstyle icons add lucide --icons heart,star,check,arrow-right

# Download with specific variant
velinstyle icons add heroicons --icons academic-cap --variant solid

# Remove all icons from a provider
velinstyle icons remove lucide

# Rebuild the SVG sprite after changes
velinstyle icons build

Custom Inline Icons

You can also use inline SVG directly:

<svg class="velin-icon" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor"/>
</svg>