Overview

Icons

The package comes with over 200 icons, drawn for it in one consistent style (24×24, 2px rounded strokes). No icon library is used or needed. Pick one by its name with icon():

use Erag\InertiaForms\Fields\Submit;

Submit::make('Invite user')->icon('user');
Submit::make('Launch')->icon('rocket');

The icon takes the text color of the element it sits in, so it matches the button, step or callout automatically.

How they are loaded. About 40 icons that the fields use themselves (like check, trash and user) are part of the frontend package. Every other icon is sent by Laravel as a few bytes of SVG with the form, and only when a field uses it, so the JavaScript bundle doesn't grow no matter how many icons exist.

Where you can use icon()

Method	Where the icon shows	Notes
Submit::icon(?string $icon, string $position = 'left')	Next to the button text	Pass 'right' to put it after the text, e.g. for "Continue →". While the form is sending, the spinner takes its place.
Fieldset::icon(?string $icon)	In the step circle of a wizard	Only used in wizards. A finished step shows a check instead.
Callout::icon(?string $icon)	At the start of a callout	Without it, the callout uses the icon of its tone (info, success, warning, danger).

Pass null to remove an icon again, for example ->icon(null).

Examples

Each example is a live form built from the PHP below it.

Buttons

icon('user') puts the user icon before the text. The second argument moves it after the text. Names may be written shopping-cart, shopping_cart or shoppingCart.

use Erag\InertiaForms\Fields\Submit;
use Erag\InertiaForms\Fields\TextInput;

[
    TextInput::make('email')->email()->required(),
    Submit::make('Invite user')->icon('user'),
    Submit::make('Add to cart')->secondary()->icon('shopping-cart'),
    Submit::make('Launch')->outline()->icon('rocket', 'right'),
];

Wizard steps

Each fieldset shows its icon in the stepper. Fill in the first step and press Continue: the finished step turns into a check.

use Erag\InertiaForms\Fields\Fieldset;
use Erag\InertiaForms\Fields\Submit;
use Erag\InertiaForms\Fields\TextInput;
use Erag\InertiaForms\Form;

class SignupWizardForm extends Form
{
    protected bool $wizard = true;

    public function fields(): array
    {
        return [
            Fieldset::make('Account')->icon('user')->fields([
                TextInput::make('name')->required(),
                TextInput::make('email')->email()->required(),
            ]),
            Fieldset::make('Shipping')->icon('truck')->fields([
                TextInput::make('address'),
            ]),
            Fieldset::make('Billing')->icon('creditCard')->fields([
                TextInput::make('card_holder')->required(),
            ]),
            Submit::make('Create account')->icon('check'),
        ];
    }
}

Callouts

A custom icon replaces the tone's icon. The last callout uses a name that doesn't exist (unicorn), so it keeps the default icon.

use Erag\InertiaForms\Fields\Callout;
use Erag\InertiaForms\Fields\Toggle;

[
    Callout::make('New sign-ins', 'We email you when someone signs in from a new device.')->icon('bell'),
    Callout::make('Two-factor authentication', 'Required for every admin.')->warning()->icon('key'),
    Callout::make('Heads up', 'An unknown icon name falls back to the default icon.')->icon('unicorn'),
    Toggle::make('notify')->label('Email me about new sign-ins'),
];

Your own icon

Register any SVG under a name, then use it like the others.

use Erag\InertiaForms\Fields\Submit;
use Erag\InertiaForms\Fields\TextInput;
use Erag\InertiaForms\Support\Icon;

// Usually in AppServiceProvider::boot(), or in config/inertia-forms.php.
Icon::register('brandMark', '<circle cx="12" cy="12" r="9"/><path d="M8 12h8M12 8v8"/>');

[
    TextInput::make('project')->required(),
    Submit::make('Create project')->icon('brandMark'),
];

All icons

Click an icon to copy its name. map-pin, map_pin and MapPin all work as mapPin.

206 icons

People

Communication

Files

Text and code

Actions

Arrows

Status and controls

Commerce

Time

Places

Devices

Media

Security

Nature and ideas

Charts and layout

Shapes

Your own icons

Add icons in config/inertia-forms.php (publish it with erag:install-inertia-forms):

'icons' => [
    'bolt' => '<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>',
    'brand-mark' => '<circle cx="12" cy="12" r="9"/><path d="M8 12h8M12 8v8"/>',
],

Or register them in code, for example in AppServiceProvider::boot():

use Erag\InertiaForms\Support\Icon;

Icon::register('bolt', '<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>');

The SVG can be:

• the inside of a 24×24 icon: <path …/>, <circle …/>, <rect …/> and so on,
• just a path's d value: 'M13 2 4 14h7l-1 8 9-12h-7z',
• or a whole <svg> element, whose inside is used.

It is drawn in a 24×24 box with a 2px currentColor stroke and no fill, like the other icons. Give a shape fill="currentColor" stroke="none" for a solid part. A name that already exists replaces the package's icon everywhere.

For safety, icons may only contain SVG shapes: <script>, <foreignObject>, <use>, <image>, on… event attributes and javascript: links are rejected with an exception.

Icon::exists('rocket') tells you whether a name shows an icon, and Icon::names() lists every available name.

Unknown names

An icon name that isn't in the list above (or registered) never breaks the form:

Used on	What you see
Submit button	The button without an icon.
Wizard step	The step number.
Callout	The tone's default icon.

Block icons are text

Block::icon() is different: it takes one or two characters shown in the "add block" menu, not an icon name.

Block::make('hero')->icon('★');
Block::make('faq')->icon('?');