Icons
Including icons using the icon helper.
The icon helper is a snippet for embedding icons. You can use any icon from Phosphor. The regular weight is the one that ships, so browse with that filter on. Only the icons you actually use are included in your site.
Using the helper
Only the icon name is required. The size defaults to 24 pixels and the color is inherited from the parent if not specified.
{{icon "star"}}
{{icon "check" size="28"}}
{{icon "heart" size="20" color="text-brand"}}
{{icon "cable-car" size="36" color="text-brand" class="ml-2"}}Examples
<!-- Button with icon -->
<button class="btn flex items-center gap-2">
{{icon "star" size="20"}}
<span>Favorite</span>
</button>
<!-- Icon list -->
<ul>
<li class="flex gap-3 mb-4">
{{icon "check-square" size="24" color="text-brand"}}
<span class="body-md text-fg-muted">Done</span>
</li>
<li class="flex gap-3 mb-4">
{{icon "square" size="24" color="text-brand"}}
<span class="body-md text-fg-muted">Todo</span>
</li>
</ul>
<!-- Social icon with hover -->
<a href="{{instagram-url}}"
class="text-fg-muted hover:text-brand transition-colors">
{{icon "instagram-logo" size="24"}}
</a>