Github
  1. Blade Components
  5. Layout Icon

Layout Icon

A contained icon to be used to differentiate layout components.

Usage

<x-layout.icon icon="heroicon-o-cube-transparent" />

Style

Control the icon style by setting the style attribute.

<div class="flex items-start justify-center gap-8 max-md:flex-col">
    <x-layout.icon icon="heroicon-o-cube-transparent" />
    <x-layout.icon icon="heroicon-o-cube-transparent" style="secondary" />
    <x-layout.icon icon="heroicon-o-cube-transparent" style="outline" />
</div>

Size

Control the icon size by setting the size attribute.

<div class="flex items-start justify-center gap-8 max-md:flex-col">
    <x-layout.icon icon="heroicon-o-cube-transparent" size="xs" />
    <x-layout.icon icon="heroicon-o-cube-transparent" size="sm" />
    <x-layout.icon icon="heroicon-o-cube-transparent" />
    <x-layout.icon icon="heroicon-o-cube-transparent" size="lg" />
</div>

Component API

x-layout.icon

Attribute Default Description
style primary string
Possible values primary, secondary or outline.
size default string
Possible values default, xs, sm, or lg.

On This Page