Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add icon

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

The Icon component renders inline SVG icons from a built-in icon set based on the Feather Icons style (24x24 viewBox, stroke-based). Icons are rendered directly in the HTML without external requests, ensuring fast load times. The component supports five size presets and inherits the parent's text color via currentColor.

Use icons for:

  • Button labels and decorators
  • Navigation items
  • Status indicators
  • Form field prefixes/suffixes
  • Standalone visual elements

Basic Usage

<x-aura::icon name="home" />
<x-aura::icon name="home" />

Props

Prop Type Default Description
name string 'circle' Icon name from the available set
size string 'md' Size preset: xs (12px), sm (16px), md (20px), lg (24px), xl (32px)

Additional attributes (e.g., class, style, aria-hidden) are passed through to the <svg> element.

Available Icons

Below is the complete set of 150+ built-in icons, organized by category.

arrow-left

arrow-right

arrow-up

arrow-down

chevron-down

chevron-up

chevron-left

chevron-right

chevrons-left

chevrons-right

external-link

menu

sidebar

navigation

compass

map

map-pin

log-in

log-out

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="arrow-left" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">arrow-left</p></div>
    <div class="text-center"><x-aura::icon name="arrow-right" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">arrow-right</p></div>
    <div class="text-center"><x-aura::icon name="arrow-up" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">arrow-up</p></div>
    <div class="text-center"><x-aura::icon name="arrow-down" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">arrow-down</p></div>
    <div class="text-center"><x-aura::icon name="chevron-down" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">chevron-down</p></div>
    <div class="text-center"><x-aura::icon name="chevron-up" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">chevron-up</p></div>
    <div class="text-center"><x-aura::icon name="chevron-left" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">chevron-left</p></div>
    <div class="text-center"><x-aura::icon name="chevron-right" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">chevron-right</p></div>
    <div class="text-center"><x-aura::icon name="chevrons-left" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">chevrons-left</p></div>
    <div class="text-center"><x-aura::icon name="chevrons-right" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">chevrons-right</p></div>
    <div class="text-center"><x-aura::icon name="external-link" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">external-link</p></div>
    <div class="text-center"><x-aura::icon name="menu" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">menu</p></div>
    <div class="text-center"><x-aura::icon name="sidebar" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">sidebar</p></div>
    <div class="text-center"><x-aura::icon name="navigation" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">navigation</p></div>
    <div class="text-center"><x-aura::icon name="compass" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">compass</p></div>
    <div class="text-center"><x-aura::icon name="map" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">map</p></div>
    <div class="text-center"><x-aura::icon name="map-pin" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">map-pin</p></div>
    <div class="text-center"><x-aura::icon name="log-in" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">log-in</p></div>
    <div class="text-center"><x-aura::icon name="log-out" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">log-out</p></div>
</div>

Actions

plus

minus

check

x

search

filter

refresh

refresh-cw

rotate-cw

rotate-ccw

download

upload

upload-cloud

copy

clipboard

share

trash

trash-2

pencil

move

send

save

scissors

zoom-in

zoom-out

maximize

minimize

crosshair

target

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="plus" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">plus</p></div>
    <div class="text-center"><x-aura::icon name="minus" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">minus</p></div>
    <div class="text-center"><x-aura::icon name="check" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">check</p></div>
    <div class="text-center"><x-aura::icon name="x" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">x</p></div>
    <div class="text-center"><x-aura::icon name="search" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">search</p></div>
    <div class="text-center"><x-aura::icon name="filter" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">filter</p></div>
    <div class="text-center"><x-aura::icon name="refresh" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">refresh</p></div>
    <div class="text-center"><x-aura::icon name="refresh-cw" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">refresh-cw</p></div>
    <div class="text-center"><x-aura::icon name="rotate-cw" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">rotate-cw</p></div>
    <div class="text-center"><x-aura::icon name="rotate-ccw" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">rotate-ccw</p></div>
    <div class="text-center"><x-aura::icon name="download" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">download</p></div>
    <div class="text-center"><x-aura::icon name="upload" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">upload</p></div>
    <div class="text-center"><x-aura::icon name="upload-cloud" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">upload-cloud</p></div>
    <div class="text-center"><x-aura::icon name="copy" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">copy</p></div>
    <div class="text-center"><x-aura::icon name="clipboard" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">clipboard</p></div>
    <div class="text-center"><x-aura::icon name="share" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">share</p></div>
    <div class="text-center"><x-aura::icon name="trash" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">trash</p></div>
    <div class="text-center"><x-aura::icon name="trash-2" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">trash-2</p></div>
    <div class="text-center"><x-aura::icon name="pencil" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">pencil</p></div>
    <div class="text-center"><x-aura::icon name="move" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">move</p></div>
    <div class="text-center"><x-aura::icon name="send" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">send</p></div>
    <div class="text-center"><x-aura::icon name="save" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">save</p></div>
    <div class="text-center"><x-aura::icon name="scissors" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">scissors</p></div>
    <div class="text-center"><x-aura::icon name="zoom-in" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">zoom-in</p></div>
    <div class="text-center"><x-aura::icon name="zoom-out" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">zoom-out</p></div>
    <div class="text-center"><x-aura::icon name="maximize" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">maximize</p></div>
    <div class="text-center"><x-aura::icon name="minimize" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">minimize</p></div>
    <div class="text-center"><x-aura::icon name="crosshair" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">crosshair</p></div>
    <div class="text-center"><x-aura::icon name="target" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">target</p></div>
</div>

Status

info

alert-circle

alert-triangle

check-circle

x-circle

x-octagon

bell

shield

loader

thumbs-up

thumbs-down

smile

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="info" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">info</p></div>
    <div class="text-center"><x-aura::icon name="alert-circle" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">alert-circle</p></div>
    <div class="text-center"><x-aura::icon name="alert-triangle" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">alert-triangle</p></div>
    <div class="text-center"><x-aura::icon name="check-circle" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">check-circle</p></div>
    <div class="text-center"><x-aura::icon name="x-circle" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">x-circle</p></div>
    <div class="text-center"><x-aura::icon name="x-octagon" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">x-octagon</p></div>
    <div class="text-center"><x-aura::icon name="bell" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">bell</p></div>
    <div class="text-center"><x-aura::icon name="shield" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">shield</p></div>
    <div class="text-center"><x-aura::icon name="loader" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">loader</p></div>
    <div class="text-center"><x-aura::icon name="thumbs-up" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">thumbs-up</p></div>
    <div class="text-center"><x-aura::icon name="thumbs-down" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">thumbs-down</p></div>
    <div class="text-center"><x-aura::icon name="smile" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">smile</p></div>
</div>

Objects

home

settings

user

users

user-plus

user-check

user-minus

user-x

lock

key

globe

inbox

mail

message-circle

calendar

clock

watch

star

heart

file

file-text

folder

folder-open

image

grid

columns

layers

layout

layout-dashboard

link

paperclip

tag

tags

flag

bookmark

book

archive

package

gift

briefcase

award

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="home" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">home</p></div>
    <div class="text-center"><x-aura::icon name="settings" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">settings</p></div>
    <div class="text-center"><x-aura::icon name="user" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">user</p></div>
    <div class="text-center"><x-aura::icon name="users" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">users</p></div>
    <div class="text-center"><x-aura::icon name="user-plus" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">user-plus</p></div>
    <div class="text-center"><x-aura::icon name="user-check" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">user-check</p></div>
    <div class="text-center"><x-aura::icon name="user-minus" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">user-minus</p></div>
    <div class="text-center"><x-aura::icon name="user-x" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">user-x</p></div>
    <div class="text-center"><x-aura::icon name="lock" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">lock</p></div>
    <div class="text-center"><x-aura::icon name="key" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">key</p></div>
    <div class="text-center"><x-aura::icon name="globe" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">globe</p></div>
    <div class="text-center"><x-aura::icon name="inbox" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">inbox</p></div>
    <div class="text-center"><x-aura::icon name="mail" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">mail</p></div>
    <div class="text-center"><x-aura::icon name="message-circle" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">message-circle</p></div>
    <div class="text-center"><x-aura::icon name="calendar" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">calendar</p></div>
    <div class="text-center"><x-aura::icon name="clock" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">clock</p></div>
    <div class="text-center"><x-aura::icon name="watch" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">watch</p></div>
    <div class="text-center"><x-aura::icon name="star" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">star</p></div>
    <div class="text-center"><x-aura::icon name="heart" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">heart</p></div>
    <div class="text-center"><x-aura::icon name="file" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">file</p></div>
    <div class="text-center"><x-aura::icon name="file-text" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">file-text</p></div>
    <div class="text-center"><x-aura::icon name="folder" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">folder</p></div>
    <div class="text-center"><x-aura::icon name="folder-open" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">folder-open</p></div>
    <div class="text-center"><x-aura::icon name="image" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">image</p></div>
    <div class="text-center"><x-aura::icon name="grid" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">grid</p></div>
    <div class="text-center"><x-aura::icon name="columns" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">columns</p></div>
    <div class="text-center"><x-aura::icon name="layers" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">layers</p></div>
    <div class="text-center"><x-aura::icon name="layout" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">layout</p></div>
    <div class="text-center"><x-aura::icon name="layout-dashboard" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">layout-dashboard</p></div>
    <div class="text-center"><x-aura::icon name="link" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">link</p></div>
    <div class="text-center"><x-aura::icon name="paperclip" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">paperclip</p></div>
    <div class="text-center"><x-aura::icon name="tag" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">tag</p></div>
    <div class="text-center"><x-aura::icon name="tags" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">tags</p></div>
    <div class="text-center"><x-aura::icon name="flag" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">flag</p></div>
    <div class="text-center"><x-aura::icon name="bookmark" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">bookmark</p></div>
    <div class="text-center"><x-aura::icon name="book" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">book</p></div>
    <div class="text-center"><x-aura::icon name="archive" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">archive</p></div>
    <div class="text-center"><x-aura::icon name="package" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">package</p></div>
    <div class="text-center"><x-aura::icon name="gift" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">gift</p></div>
    <div class="text-center"><x-aura::icon name="briefcase" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">briefcase</p></div>
    <div class="text-center"><x-aura::icon name="award" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">award</p></div>
</div>

Data & Charts

bar-chart

bar-chart-2

chart-bar

pie-chart

activity

trending-up

trending-down

percent

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="bar-chart" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">bar-chart</p></div>
    <div class="text-center"><x-aura::icon name="bar-chart-2" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">bar-chart-2</p></div>
    <div class="text-center"><x-aura::icon name="chart-bar" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">chart-bar</p></div>
    <div class="text-center"><x-aura::icon name="pie-chart" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">pie-chart</p></div>
    <div class="text-center"><x-aura::icon name="activity" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">activity</p></div>
    <div class="text-center"><x-aura::icon name="trending-up" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">trending-up</p></div>
    <div class="text-center"><x-aura::icon name="trending-down" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">trending-down</p></div>
    <div class="text-center"><x-aura::icon name="percent" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">percent</p></div>
</div>

Media

play

pause

skip-forward

stop-circle

shuffle

volume-1

volume-2

volume-x

camera

music

video

headphones

radio

disc

cast

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="play" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">play</p></div>
    <div class="text-center"><x-aura::icon name="pause" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">pause</p></div>
    <div class="text-center"><x-aura::icon name="skip-forward" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">skip-forward</p></div>
    <div class="text-center"><x-aura::icon name="stop-circle" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">stop-circle</p></div>
    <div class="text-center"><x-aura::icon name="shuffle" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">shuffle</p></div>
    <div class="text-center"><x-aura::icon name="volume-1" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">volume-1</p></div>
    <div class="text-center"><x-aura::icon name="volume-2" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">volume-2</p></div>
    <div class="text-center"><x-aura::icon name="volume-x" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">volume-x</p></div>
    <div class="text-center"><x-aura::icon name="camera" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">camera</p></div>
    <div class="text-center"><x-aura::icon name="music" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">music</p></div>
    <div class="text-center"><x-aura::icon name="video" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">video</p></div>
    <div class="text-center"><x-aura::icon name="headphones" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">headphones</p></div>
    <div class="text-center"><x-aura::icon name="radio" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">radio</p></div>
    <div class="text-center"><x-aura::icon name="disc" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">disc</p></div>
    <div class="text-center"><x-aura::icon name="cast" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">cast</p></div>
</div>

Communication

mail

message-circle

phone

phone-call

phone-off

at-sign

voicemail

rss

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="mail" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">mail</p></div>
    <div class="text-center"><x-aura::icon name="message-circle" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">message-circle</p></div>
    <div class="text-center"><x-aura::icon name="phone" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">phone</p></div>
    <div class="text-center"><x-aura::icon name="phone-call" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">phone-call</p></div>
    <div class="text-center"><x-aura::icon name="phone-off" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">phone-off</p></div>
    <div class="text-center"><x-aura::icon name="at-sign" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">at-sign</p></div>
    <div class="text-center"><x-aura::icon name="voicemail" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">voicemail</p></div>
    <div class="text-center"><x-aura::icon name="rss" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">rss</p></div>
</div>

Development

code

terminal

git-branch

git-commit

git-merge

git-pull-request

database

server

cpu

hash

command

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="code" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">code</p></div>
    <div class="text-center"><x-aura::icon name="terminal" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">terminal</p></div>
    <div class="text-center"><x-aura::icon name="git-branch" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">git-branch</p></div>
    <div class="text-center"><x-aura::icon name="git-commit" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">git-commit</p></div>
    <div class="text-center"><x-aura::icon name="git-merge" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">git-merge</p></div>
    <div class="text-center"><x-aura::icon name="git-pull-request" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">git-pull-request</p></div>
    <div class="text-center"><x-aura::icon name="database" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">database</p></div>
    <div class="text-center"><x-aura::icon name="server" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">server</p></div>
    <div class="text-center"><x-aura::icon name="cpu" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">cpu</p></div>
    <div class="text-center"><x-aura::icon name="hash" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">hash</p></div>
    <div class="text-center"><x-aura::icon name="command" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">command</p></div>
</div>

Text Editing

bold

italic

underline

strikethrough

type

list

list-ordered

pen-tool

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="bold" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">bold</p></div>
    <div class="text-center"><x-aura::icon name="italic" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">italic</p></div>
    <div class="text-center"><x-aura::icon name="underline" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">underline</p></div>
    <div class="text-center"><x-aura::icon name="strikethrough" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">strikethrough</p></div>
    <div class="text-center"><x-aura::icon name="type" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">type</p></div>
    <div class="text-center"><x-aura::icon name="list" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">list</p></div>
    <div class="text-center"><x-aura::icon name="list-ordered" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">list-ordered</p></div>
    <div class="text-center"><x-aura::icon name="pen-tool" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">pen-tool</p></div>
</div>

Commerce

shopping-cart

credit-card

dollar-sign

currency-dollar

truck

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="shopping-cart" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">shopping-cart</p></div>
    <div class="text-center"><x-aura::icon name="credit-card" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">credit-card</p></div>
    <div class="text-center"><x-aura::icon name="dollar-sign" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">dollar-sign</p></div>
    <div class="text-center"><x-aura::icon name="currency-dollar" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">currency-dollar</p></div>
    <div class="text-center"><x-aura::icon name="truck" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">truck</p></div>
</div>

Devices & Hardware

monitor

smartphone

tablet

tv

speaker

printer

battery

wifi

wifi-off

power

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="monitor" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">monitor</p></div>
    <div class="text-center"><x-aura::icon name="smartphone" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">smartphone</p></div>
    <div class="text-center"><x-aura::icon name="tablet" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">tablet</p></div>
    <div class="text-center"><x-aura::icon name="tv" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">tv</p></div>
    <div class="text-center"><x-aura::icon name="speaker" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">speaker</p></div>
    <div class="text-center"><x-aura::icon name="printer" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">printer</p></div>
    <div class="text-center"><x-aura::icon name="battery" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">battery</p></div>
    <div class="text-center"><x-aura::icon name="wifi" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">wifi</p></div>
    <div class="text-center"><x-aura::icon name="wifi-off" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">wifi-off</p></div>
    <div class="text-center"><x-aura::icon name="power" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">power</p></div>
</div>

Miscellaneous

circle

square

octagon

palette

sliders

toggle-left

toggle-right

zap

sun

moon

sunrise

sunset

cloud

umbrella

thermometer

eye

eye-off

more-vertical

slash

tool

wrench

coffee

life-buoy

pocket

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
    <div class="text-center"><x-aura::icon name="circle" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">circle</p></div>
    <div class="text-center"><x-aura::icon name="square" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">square</p></div>
    <div class="text-center"><x-aura::icon name="octagon" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">octagon</p></div>
    <div class="text-center"><x-aura::icon name="palette" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">palette</p></div>
    <div class="text-center"><x-aura::icon name="sliders" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">sliders</p></div>
    <div class="text-center"><x-aura::icon name="toggle-left" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">toggle-left</p></div>
    <div class="text-center"><x-aura::icon name="toggle-right" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">toggle-right</p></div>
    <div class="text-center"><x-aura::icon name="zap" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">zap</p></div>
    <div class="text-center"><x-aura::icon name="sun" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">sun</p></div>
    <div class="text-center"><x-aura::icon name="moon" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">moon</p></div>
    <div class="text-center"><x-aura::icon name="sunrise" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">sunrise</p></div>
    <div class="text-center"><x-aura::icon name="sunset" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">sunset</p></div>
    <div class="text-center"><x-aura::icon name="cloud" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">cloud</p></div>
    <div class="text-center"><x-aura::icon name="umbrella" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">umbrella</p></div>
    <div class="text-center"><x-aura::icon name="thermometer" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">thermometer</p></div>
    <div class="text-center"><x-aura::icon name="eye" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">eye</p></div>
    <div class="text-center"><x-aura::icon name="eye-off" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">eye-off</p></div>
    <div class="text-center"><x-aura::icon name="more-vertical" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">more-vertical</p></div>
    <div class="text-center"><x-aura::icon name="slash" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">slash</p></div>
    <div class="text-center"><x-aura::icon name="tool" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">tool</p></div>
    <div class="text-center"><x-aura::icon name="wrench" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">wrench</p></div>
    <div class="text-center"><x-aura::icon name="coffee" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">coffee</p></div>
    <div class="text-center"><x-aura::icon name="life-buoy" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">life-buoy</p></div>
    <div class="text-center"><x-aura::icon name="pocket" class="h-6 w-6 text-violet-600" /><p class="mt-1 text-xs text-gray-500">pocket</p></div>
</div>

Variants/Examples

Size Comparison

<div class="flex items-center gap-4">
    <x-aura::icon name="star" size="xs" />
    <x-aura::icon name="star" size="sm" />
    <x-aura::icon name="star" size="md" />
    <x-aura::icon name="star" size="lg" />
    <x-aura::icon name="star" size="xl" />
</div>
<x-aura::icon name="star" size="xs" /> {{-- 12x12 --}}
<x-aura::icon name="star" size="sm" /> {{-- 16x16 --}}
<x-aura::icon name="star" size="md" /> {{-- 20x20 --}}
<x-aura::icon name="star" size="lg" /> {{-- 24x24 --}}
<x-aura::icon name="star" size="xl" /> {{-- 32x32 --}}

With Custom Color

Icons inherit currentColor from their parent, so set the text color on the parent or directly:

<span class="text-green-500">
    <x-aura::icon name="check-circle" size="lg" />
</span>

<x-aura::icon name="alert-triangle" size="md" class="text-yellow-500" />
<span class="text-green-500">
    <x-aura::icon name="check-circle" size="lg" />
</span>

<x-aura::icon name="alert-triangle" size="md" class="text-yellow-500" />

Inside a Button

Icons are commonly used inside buttons via the button's icon prop, but can also be placed manually:

<button class="flex items-center gap-2">
    <x-aura::icon name="download" size="sm" />
    <span>Download</span>
</button>
<button class="flex items-center gap-2">
    <x-aura::icon name="download" size="sm" />
    <span>Download</span>
</button>

Status Indicators

Verified
Failed
Pending 
<div class="flex items-center gap-2">
    <x-aura::icon name="check-circle" size="sm" class="text-green-500" />
    <span>Verified</span>
</div>

<div class="flex items-center gap-2">
    <x-aura::icon name="x-circle" size="sm" class="text-red-500" />
    <span>Failed</span>
</div>

<div class="flex items-center gap-2">
    <x-aura::icon name="clock" size="sm" class="text-yellow-500" />
    <span>Pending</span>
</div>
<div class="flex items-center gap-2">
    <x-aura::icon name="check-circle" size="sm" class="text-green-500" />
    <span>Verified</span>
</div>

<div class="flex items-center gap-2">
    <x-aura::icon name="x-circle" size="sm" class="text-red-500" />
    <span>Failed</span>
</div>

<div class="flex items-center gap-2">
    <x-aura::icon name="clock" size="sm" class="text-yellow-500" />
    <span>Pending</span>
</div>
Dashboard 
<a href="/dashboard" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-100">
    <x-aura::icon name="home" size="sm" />
    <span>Dashboard</span>
</a>
<a href="/dashboard" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-100">
    <x-aura::icon name="home" size="sm" />
    <span>Dashboard</span>
</a>

Fallback Behavior

If an invalid icon name is provided, the component renders a default circle icon:

<x-aura::icon name="nonexistent" /> {{-- Renders a circle --}}

Slots

The Icon component does not use slots. The SVG content is determined by the name prop.

Accessibility

  • Icons are decorative by default. When used alongside text, add aria-hidden="true":
Home 
<x-aura::icon name="home" size="sm" aria-hidden="true" />
<span>Home</span>
<x-aura::icon name="home" size="sm" aria-hidden="true" />
<span>Home</span>
  • When an icon is the sole content (no visible text), provide an accessible label:
<button aria-label="Close">
    <x-aura::icon name="x" size="md" />
</button>
<button aria-label="Close">
    <x-aura::icon name="x" size="md" />
</button>
  • All icons use fill="none" and stroke="currentColor", ensuring they adapt to the parent's color and are visible in both light and dark modes.
  • Icons scale with the size prop using explicit width and height attributes for consistent rendering.