Placement

This guide explains where to store SVG resources and how to reference them. You can store SVGs as page or global resources. Icons are available as global resources.

Page resource

A page resource is a resource in the current page bundle. A page bundle is a directory with an index.md or _index.md file at its root.

  • content
    • docs
      • getting-started
        • index.md
        • logo-netlify.svg

Reference

To display a page resource SVG, use the relative path:

logo-netlify.svg

Global resource

A global resource is a resource in the assets directory, or within any directory mounted to the assets directory (like for example icon sets).

  • assets
    • svgs
      • logo-netlify.svg
      • lucide
        • check.svg
      • tabler-icons
        • check.svg

Reference

To display a global resource SVG or icon, use the relative path:

svgs/logo-netlify.svg

svgs/lucide/check.svg

svgs/tabler-icons/check.svg

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

check