Icons

This guide explains how to render icons with the inline-svg shortcode. For all available arguments, see the shortcode reference page.

Examples

Icon name

To display a global resource icon of an icon set configured in iconSetDir, use the icon name.

Visit an icon set website (e.g. Tabler Icons or Lucide), search for an icon, click it to view details, then click the icon name to copy it.

{{< inline-svg
  src="check"
  title="Success"
  desc="Operation completed successfully"
  role="img"
>}}
Preview
SuccessOperation completed successfully

Rendered HTML

<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" aria-labelledby="title-svg-check" aria-describedby="desc-svg-check" class="svg-inline" desc="Operation completed successfully" id="svg-check" role="img">
  <title id="title-svg-check">Success</title>
  <desc id="desc-svg-check">Operation completed successfully</desc>
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  <path d="M5 12l5 5l10 -10"></path>
</svg>

Relative path

{{< inline-svg
  src="svgs/tabler-icons/check"
  title="Success"
  desc="Operation completed successfully"
  role="img"
>}}
Preview
SuccessOperation completed successfully