Icon

SVG icon component with bundled icons.

Live Demo

Shopping & Cart

Products & Inventory

User & Account

Payment

Arrows - Chevrons

Arrows - Straight

Arrows - Long (with tails)

Arrows - Double & Expand

Navigation & Links

Communication

Media - Playback

Media - Content

Documents

UI Controls

Social Media

Actions

Status & Info

Shipping & Delivery

Other

Custom Sizes

Custom Colors

Usage

<template>
  <orio-icon name="edit" />
  <orio-icon name="check" :size="32" color="green" />
</template>

Available Icons

Arrows - Chevrons (angled arrows)

• chevron-up - Chevron pointing up
• chevron-down - Chevron pointing down
• chevron-left - Chevron pointing left
• chevron-right - Chevron pointing right

Arrows - Straight (simple triangles)

• arrow-up - Simple arrow pointing up
• arrow-down - Simple arrow pointing down
• arrow-left - Simple arrow pointing left
• arrow-right - Simple arrow pointing right

Arrows - Long (with tails)

• arrow-back - Back navigation arrow
• arrow-forward - Forward navigation arrow
• arrow-upward - Upward navigation arrow
• arrow-downward - Downward navigation arrow

Arrows - Special

• double-arrow-left - Skip/fast backward
• double-arrow-right - Skip/fast forward
• expand-more - Expand/show more content
• expand-less - Collapse/show less content

Navigation & Links

• home - Home page
• menu - Hamburger menu
• filter - Filter options
• grid-view - Grid layout view
• list-view - List layout view
• link - Link/chain icon
• external-link - External link/open in new tab

Communication

• mail - Email/envelope
• message - Message/SMS
• chat - Chat/conversation
• phone - Phone/call

Media - Playback

• play - Play media
• pause - Pause media
• stop - Stop media
• skip-next - Skip to next
• skip-previous - Skip to previous

Media - Content

• image - Image/photo
• video - Video/camera
• camera - Camera/take photo
• mic - Microphone on
• mic-off - Microphone muted
• volume - Volume/sound on
• volume-off - Volume muted

Documents

• file - Generic file
• folder - Folder closed
• folder-open - Folder open
• document - Text document
• pdf - PDF document

UI Controls

• eye - Show/visible
• eye-off - Hide/invisible
• lock - Locked/secure
• unlock - Unlocked/unsecure
• copy - Copy to clipboard

Social Media

• github - GitHub
• twitter - Twitter/X
• facebook - Facebook
• instagram - Instagram
• youtube - YouTube
• linkedin - LinkedIn

Shopping & Cart

• shopping-cart - Full shopping cart with items
• shopping-bag - Shopping bag icon
• cart-plus - Add to cart action
• cart-remove - Remove from cart action

Products & Inventory

• tag - Price tag
• barcode - Product barcode scanner
• package - Package/box for shipping
• gift - Gift/present icon
• box - Storage/inventory box

User & Account

• user - User profile/account
• heart - Favorite/wishlist (filled)
• heart-outline - Favorite/wishlist (outline)
• star - Rating star (filled)
• star-outline - Rating star (outline)

Payment

• credit-card - Credit card payment
• wallet - Digital wallet
• receipt - Order receipt/invoice

Actions

• edit - Edit/pencil icon
• check - Checkmark
• plus - Plus/add icon
• close - Close/X icon
• search - Search/magnifying glass
• upload - Upload arrow icon
• download - Download arrow icon
• delete - Delete/trash icon
• share - Share product/link
• refresh - Refresh/reload
• settings - Settings/preferences
• bell - Notifications/alerts
• compare - Compare products
• discount - Discounts/sales

Status & Info

• loading-loop - Animated loading spinner
• info - Information
• warning - Warning/alert
• check-circle - Success confirmation
• error-circle - Error state
• help - Help/support

Shipping & Delivery

• truck - Delivery/shipping
• location - Store location
• map-pin - Location pin

Other

• calendar - Calendar icon

See the Icon Registry for more details on adding custom icons.

Props

Prop	Type	Default	Description
name	IconName | string	-	Icon name from registry
size	string | number	'1em'	Icon size (px or em)
color	string	'currentColor'	Icon color (CSS color)