Icon

<div class="flex items-end gap-4">
  <%= render(UI::Icon.new(name: "menu", size: :xs)) %>
  <%= render(UI::Icon.new(name: "menu", size: :sm)) %>
  <%= render(UI::Icon.new(name: "menu", size: :default)) %>
  <%= render(UI::Icon.new(name: "menu", size: :lg)) %>
  <%= render(UI::Icon.new(name: "menu", size: :xl)) %>
</div>

<div class="grid grid-cols-6 gap-4">
  <% %w[menu arrow-right globe badge-check circle-alert x circle-check eye eye-off lock chevrons-up-down layout-dashboard panel-left user loader].each do |name| %>
    <div class="flex flex-col items-center gap-1 p-2 border rounded-md">
      <%= render(UI::Icon.new(name: name)) %>
      <span class="text-xs text-muted-foreground"><%= name %></span>
    </div>
  <% end %>
</div>