icon · Admiral UI kit

Example

Laravel

<x-admin::toolbar>
    @foreach (\Admiral\UiKit\Icons::names() as $name)
        <x-admin::tooltip :text="$name"><span tabindex="0"><x-admin::icon :name="$name" /></span></x-admin::tooltip>
    @endforeach
</x-admin::toolbar>

Props

Prop	Required	Default	Options
`name`	yes

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Icon } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack

<div class="adm-toolbar" role="toolbar"><span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-celD4zgm">activity</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-lKqpQ2uq">alert</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-wC8gASxu">arrow-down</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M12 19l-7-7 7-7"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-LrF8sJyw">arrow-left</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-U0kTRWjB">arrow-right</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-nGsqQ4qZ">arrow-up</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-ps5GNcpv">bell</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-z8KfnnM3">bold</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19.5V5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2.5zM20 19v3H6"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-MCMssyV8">book</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-njFQSC0i">calendar</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-uWRPcjRf">check</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-1vL9HbgW">chevron-down</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-ibU6zYNT">chevron-left</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-lyx6Kavp">chevron-right</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-l9jq5Fr5">clock</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-QcU1WJ9A">copy</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-WkrNzatG">download</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-LFYUtdu5">edit</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-ytjpxgQ7">external</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-U9FI9CBj">eye</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z"/><path d="M14 3v5h5"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-rfbT8uiR">file</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5h18l-7 8v6l-4 2v-8z"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-eqX21hTf">filter</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-zdALNBGs">flag</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13M5 12v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-Kv6BwYfK">gift</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-94UrfESs">grid</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-WM7FbLwi">home</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-03XrPh8m">image</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5h-5M14 19H9M14 5l-4 14"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-Qat2VhyQ">italic</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-NsVzT7Kx">info</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-25EpslCO">layers</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 14a4 4 0 0 0 6 .5l3-3a4 4 0 0 0-5.7-5.7l-1.5 1.5M14 10a4 4 0 0 0-6-.5l-3 3a4 4 0 0 0 5.7 5.7l1.5-1.5"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-dqQT3c1E">link</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-p9Hb0tQP">list</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 6h10M10 12h10M10 18h10M4 5l1.5-1v6M4 15.5a1.5 1.5 0 0 1 3 0c0 1-3 2-3 3.5h3"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-VbcGyPVb">list-ordered</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-8rMWOFK1">lock</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4M16 17l5-5-5-5M21 12H9"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-ytn2xmOH">logout</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-mV3fOEn0">mail</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-B8uawI7c">menu</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="5" cy="12" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="19" cy="12" r="1.2" fill="currentColor"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-EowH4rWt">more</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0zM12 18v4"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-qtNri3SD">plug</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-O6NFBE2h">plus</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 7H5v6h4v-6zM9 13c0 2-1 4-3 4M19 7h-4v6h4V7zM19 13c0 2-1 4-3 4"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-MPFO5J7c">quote</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.6-6.4L21 8M21 3v5h-5"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-OlFrUKxh">refresh</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-2YbFjG9G">search</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-V2FTlCS9">settings</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-g4a6IIuw">sidebar</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-FJkfkSTA">trash</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5v6a5 5 0 0 0 10 0V5M5 20h14"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-dPn1yTQf">underline</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21V9M7 14l5-5 5 5M5 3h14"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-3dI3IWFU">upload</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-m2tKUXSW">user</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M16 3.5a4 4 0 0 1 0 9M22 21a7 7 0 0 0-4-6.3"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-w7aR8ECx">users</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-aqbSRFRT">x-circle</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-5iJPwv7Y">tick</span></span>
            <span class="adm-tooltip-wrap" data-adm-tooltip><span tabindex="0"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="adm-tooltip" role="tooltip" popover="manual" id="adm-tip-saAL9DG1">x</span></span></div>