Usage
<%= ui.icon "check-circle" %>
<%= ui.icon "arrow-right", size: 5 %>
<%= ui.icon "heart", size: 6, class: "text-red-500" %>Block contentIcon name. Alternative to the `name` prop.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | String | - | Icon name (passed as first argument or content). Maps to CSS class `icon-{name}`. |
size | Integer | nil | Icon size. Adds `size-{n}` class for width and height. |
img | Boolean | false | When true, adds `icon-img` class for image-based icon styling. |
Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.
Examples
Sizes
<div class="flex items-center gap-3">
<%= ui.icon "star", size: 4 %>
<%= ui.icon "star", size: 5 %>
<%= ui.icon "star", size: 6 %>
<%= ui.icon "star", size: 8 %>
<%= ui.icon "star", size: 10 %>
</div>With colors
<div class="flex items-center gap-3">
<%= ui.icon "heart", size: 6, class: "text-red-500" %>
<%= ui.icon "check-circle", size: 6, class: "text-green-500" %>
<%= ui.icon "information-circle", size: 6, class: "text-blue-500" %>
<%= ui.icon "exclamation-triangle", size: 6, class: "text-yellow-500" %>
<%= ui.icon "x-circle", size: 6, class: "text-muted-foreground" %>
</div>Common actions
<div class="flex items-center gap-3">
<%= ui.icon "plus", size: 5 %>
<%= ui.icon "pencil", size: 5 %>
<%= ui.icon "trash", size: 5 %>
<%= ui.icon "arrow-down-tray", size: 5 %>
<%= ui.icon "share", size: 5 %>
<%= ui.icon "link", size: 5 %>
<%= ui.icon "clipboard", size: 5 %>
</div>Navigation
<div class="flex items-center gap-3">
<%= ui.icon "chevron-left", size: 5 %>
<%= ui.icon "chevron-right", size: 5 %>
<%= ui.icon "chevron-up", size: 5 %>
<%= ui.icon "chevron-down", size: 5 %>
<%= ui.icon "arrow-left", size: 5 %>
<%= ui.icon "arrow-right", size: 5 %>
</div>Status indicators
<div class="flex items-center gap-3">
<%= ui.icon "check", size: 5, class: "text-green-500" %>
<%= ui.icon "x-mark", size: 5, class: "text-red-500" %>
<%= ui.icon "clock", size: 5, class: "text-yellow-500" %>
<%= ui.icon "spinner", size: 5, class: "text-blue-500" %>
</div>Social & brands
<div class="flex items-center gap-3">
<%= ui.icon "github", size: 6 %>
<%= ui.icon "envelope", size: 6 %>
<%= ui.icon "phone", size: 6 %>
<%= ui.icon "globe-alt", size: 6 %>
</div>