Skip to content

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" />

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

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

Status

info

alert-circle

alert-triangle

check-circle

x-circle

x-octagon

bell

shield

loader

thumbs-up

thumbs-down

smile

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

Data & Charts

bar-chart

bar-chart-2

chart-bar

pie-chart

activity

trending-up

trending-down

percent

Media

play

pause

skip-forward

stop-circle

shuffle

volume-1

volume-2

volume-x

camera

music

video

headphones

radio

disc

cast

Communication

mail

message-circle

phone

phone-call

phone-off

at-sign

voicemail

rss

Development

code

terminal

git-branch

git-commit

git-merge

git-pull-request

database

server

cpu

hash

command

Text Editing

bold

italic

underline

strikethrough

type

list

list-ordered

pen-tool

Commerce

shopping-cart

credit-card

dollar-sign

currency-dollar

truck

Devices & Hardware

monitor

smartphone

tablet

tv

speaker

printer

battery

wifi

wifi-off

power

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

Variants/Examples

Size Comparison

<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" />

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>

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>
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>

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>
  • 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>
  • 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.