<div class="ui-icon-grid">
{%- for name in ["search", "plus", "check", "x", "chevron-down", "chevron-right", "more", "copy", "trash", "download", "upload", "eye", "lock", "bell", "calendar", "user", "users", "home", "folder", "file-text", "mail", "link", "settings-2", "sparkles"] %}
<div class="ui-icon-cell"><.icon name={name.to_owned()} /><span>{{ name }}</span></div>
{%- end %}
</div>
<p class="ui-cluster" style="--gap:16px;align-items:flex-end">
<.icon name="bell" size="12" />
<.icon name="bell" />
<.icon name="bell" size="20" />
<.icon name="bell" size="24" />
<span class="ui-muted">12 · 16 · 20 · 24</span>
</p>