> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-components/inline-svg-icon.md).

# Inline SVG Icon ✅

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FiYYGG18SEof5MWHPasYO%2Fimage.png?alt=media&amp;token=565d5612-b65a-4ce1-a574-c62d0eabfdc2" alt=""><figcaption></figcaption></figure>

In Webflow, inline SVGs are generally rendered using an Embed element.&#x20;

In this approach, limiations exist;&#x20;

* The SVG cannot be stored in the CMS and bound to an Embed&#x20;
  * A rich text embed hack workaround can work but makes it difficult to work with the SVG&#x20;
* The SVG cannot be componentized and slotted conveniently&#x20;

## Features&#x20;

* Paste the SVG code directly into a property&#x20;
  * Data-bind it to any text field in the CMS, or a parent component, if you like&#x20;
* Choose from several pre-defined icon sizes for convenience&#x20;
* Color the icon easily through it's wrapper DIV and the SVG currentColor property&#x20;
  * That color can be stored in the CMS as a color field, and bound to the DIV's textcolor&#x20;

The component will automatically;&#x20;

* Verify that it's an SVG&#x20;
* Render the SVG content&#x20;

## Future&#x20;

When supported by Webflow, switch to an Embed property field type.&#x20;