Logo
Neura UI
Loading…
Logo
All pages 86

Icon

A modular icon set built for motion. Each icon is composed of named SVG parts (data-part) so pieces can be animated independently — in pure CSS, driven by state, and disabled automatically under reduced-motion.

Basic Usage

Opt into the modular set with set="neura" . Names unique to the set (like spinner or chevron ) also resolve automatically; names shared with Heroicons stay on Heroicons unless you ask for Neura, so existing UI is never restyled by surprise.
blade 
<neura::icon set="neura" name="bell" />
<neura::icon set="neura" name="user" />
<neura::icon set="neura" name="settings" />
<neura::icon name="spinner" />

Variants

Three treatments share one drawing: line , duotone (a soft self-tinted fill), and solid . The tint derives from the icon's own color, so it adapts to any text color and to dark mode.
blade
line
duotone
solid 
<neura::icon set="neura" name="bell" variant="line" />
<neura::icon set="neura" name="bell" variant="duotone" />
<neura::icon set="neura" name="bell" variant="solid" />

Animations

The animate prop attaches a motion preset. Each preset has a sensible default trigger — looping, on hover, or once on mount — which you can override with trigger .

Looping

blade
spin
spin
spin
ring
pulse
float
blink
beat · loop
<neura::icon name="spinner" animate="spin" />
<neura::icon set="neura" name="bell" animate="ring" />
<neura::icon set="neura" name="wifi" animate="pulse" />
<neura::icon set="neura" name="star" animate="float" />
<neura::icon set="neura" name="info" animate="blink" />

On hover

Hover each icon:
blade
beat
beat
beat
bounce
nudge
nudge
open
ring
swing
wiggle
shake
pop
<neura::icon set="neura" name="heart" animate="beat" />
<neura::icon set="neura" name="bell" animate="swing" />
<neura::icon set="neura" name="settings" animate="wiggle" />
<neura::icon set="neura" name="lock" animate="shake" />
<neura::icon set="neura" name="star" animate="pop" />

Draw-on (once)

blade 
<neura::icon set="neura" name="check" animate="draw" />
<neura::icon set="neura" name="x" animate="draw" />
<neura::icon set="neura" name="check-circle" animate="draw" />
<neura::icon set="neura" name="circle" animate="draw" />

State Morphs

Icons made of parts can tween between two shapes. Bind data-state to any boolean — here with Alpine — and the parts transition between states. Click each one:
blade
menu ↔ close
plus ↔ minus
chevron
play ↔ pause 
<div x-data="{ open: false }">
    <button x-on:click="open = !open">
        <neura::icon name="menu" x-bind:data-state="open ? 'close' : ''" />
    </button>
</div>

Speed & Easing

Timing is tokenised through --nk-icon-dur and --nk-icon-ease . Set them anywhere in the tree to retune every icon underneath:
blade 
<div style="--nk-icon-dur: 700ms; --nk-icon-ease: linear">
    <neura::icon name="spinner" animate="spin" />
</div>

Icon Set

The core set ships 33 modular icons. Hover to preview each name.
menu
close
x
plus
chevron
check
check-circle
circle
play
bell
heart
star
spinner
refresh
search
settings
wifi
download
trash
arrow-left
arrow-right
arrow-up
arrow-down
eye
user
mail
home
info
bookmark
lock
copy
calendar
link

Collision-safe Fallback

Names shared with Heroicons resolve to Heroicons by default, so nothing existing changes. Ask for the Neura version explicitly with set="neura" . Any name absent from the Neura set always falls back to Heroicons.
blade
neura
heroicons
fallback
fallback
<neura::icon set="neura" name="bell" />   
<neura::icon name="bell" />               
<neura::icon name="rocket-launch" />

Configuration

Defaults live under the icon key of config/neura-kit.php . Animation presets and their default triggers are a swappable pack.
PHP 
// config/neura-kit.php

use Neura\Kit\NeuraKitConfig as Config;

'icon' => Config::icon([
    'default' => [
        'set' => 'neura',      // neura · heroicons
        'variant' => 'line',   // line · duotone · solid
        'size' => 'size-5',    // default when no size class is passed
    ],
    'packs' => [
        'animations' => \Neura\Kit\Packs\Icon\Animation::class,
    ],
]),

Props

Property Type Default Description
name string null Icon name (Neura set, else Heroicons fallback)
variant string line line · duotone · solid for the Neura set
set string null Force neura or heroicons
animate string null spin · pulse · ring · float · blink · beat · bounce · nudge · open · wiggle · shake · pop · swing · draw
trigger string auto loop · hover · once (defaults per preset)
state string null Morph state, e.g. close · minus · up · pause . Bind data-state for dynamic morphs.