Documentation
Description
An inline SVG icon loaded from icons/<name>.svg.
Mirrors a real-world pattern where a project has many icons and a single
component that inlines the matching SVG file by name. Its index.md
renders every icon in its own canvas block.
Example usage::
{% svg_icon "arrow-right" %}
Usage
Qualified tag usage
{% ui__svg_icon__svg_icon "add" %}
Parameters
| Name | Type | Required | Default | Choices | Description |
|---|---|---|---|---|---|
name
|
str
|
Yes | — |
add
,
arrow-down
,
arrow-left
,
arrow-right
,
arrow-up
,
calendar
,
check
,
chevron-down
,
chevron-left
,
chevron-right
,
chevron-up
,
clock
,
close
,
download
,
edit
,
heart
,
home
,
info
,
lock
,
mail
,
menu
,
minus
,
more
,
phone
,
search
,
settings
,
star
,
trash
,
upload
,
user
|
The icon identifier. |
Further documentation
SVG Icon
Inlines an SVG file from icons/ by name. Reproduces a page with many
canvas blocks — one per icon — on a single markdown page.
Usage
{% svg_icon "arrow-right" %}
<span class='svg-icon svg-icon-arrow-right ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
All variations
add
{% svg_icon "add" %}
<span class='svg-icon svg-icon-add ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
</span>
minus
{% svg_icon "minus" %}
<span class='svg-icon svg-icon-minus ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
</span>
close
{% svg_icon "close" %}
<span class='svg-icon svg-icon-close ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
</span>
check
{% svg_icon "check" %}
<span class='svg-icon svg-icon-check ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
</span>
arrow-up
{% svg_icon "arrow-up" %}
<span class='svg-icon svg-icon-arrow-up ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
</span>
arrow-down
{% svg_icon "arrow-down" %}
<span class='svg-icon svg-icon-arrow-down ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
</span>
arrow-left
{% svg_icon "arrow-left" %}
<span class='svg-icon svg-icon-arrow-left ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
</span>
arrow-right
{% svg_icon "arrow-right" %}
<span class='svg-icon svg-icon-arrow-right ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</span>
chevron-up
{% svg_icon "chevron-up" %}
<span class='svg-icon svg-icon-chevron-up ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
</span>
chevron-down
{% svg_icon "chevron-down" %}
<span class='svg-icon svg-icon-chevron-down ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
</span>
chevron-left
{% svg_icon "chevron-left" %}
<span class='svg-icon svg-icon-chevron-left ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
</span>
chevron-right
{% svg_icon "chevron-right" %}
<span class='svg-icon svg-icon-chevron-right ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
</span>
menu
{% svg_icon "menu" %}
<span class='svg-icon svg-icon-menu ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
</span>
more
{% svg_icon "more" %}
<span class='svg-icon svg-icon-more ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
</span>
search
{% svg_icon "search" %}
<span class='svg-icon svg-icon-search ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
</span>
home
{% svg_icon "home" %}
<span class='svg-icon svg-icon-home ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg>
</span>
user
{% svg_icon "user" %}
<span class='svg-icon svg-icon-user ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a7 7 0 0 1 16 0v1"/></svg>
</span>
settings
{% svg_icon "settings" %}
<span class='svg-icon svg-icon-settings ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1"/></svg>
</span>
heart
{% svg_icon "heart" %}
<span class='svg-icon svg-icon-heart ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8z"/></svg>
</span>
star
{% svg_icon "star" %}
<span class='svg-icon svg-icon-star ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg>
</span>
mail
{% svg_icon "mail" %}
<span class='svg-icon svg-icon-mail ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
</span>
phone
{% svg_icon "phone" %}
<span class='svg-icon svg-icon-phone ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg>
</span>
calendar
{% svg_icon "calendar" %}
<span class='svg-icon svg-icon-calendar ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
</span>
clock
{% svg_icon "clock" %}
<span class='svg-icon svg-icon-clock ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
</span>
lock
{% svg_icon "lock" %}
<span class='svg-icon svg-icon-lock ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
</span>
trash
{% svg_icon "trash" %}
<span class='svg-icon svg-icon-trash ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15"/></svg>
</span>
edit
{% svg_icon "edit" %}
<span class='svg-icon svg-icon-edit ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L19 9l-4-4L4 16z"/></svg>
</span>
download
{% svg_icon "download" %}
<span class='svg-icon svg-icon-download ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12M7 10l5 5 5-5M4 21h16"/></svg>
</span>
upload
{% svg_icon "upload" %}
<span class='svg-icon svg-icon-upload ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21V9M7 14l5-5 5 5M4 3h16"/></svg>
</span>
info
{% svg_icon "info" %}
<span class='svg-icon svg-icon-info ' aria-hidden='true'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.5"/></svg>
</span>
Sandbox