> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/blocks/svg-block.md).

# SVG Block

The SVG block allows you to add icons,  SVG images and inline SVG code snippets in an instant.

## Add

* Select required block.
* Click the "+" icon at the bottom of the Quick Inserter.
* Search for the SVG block.
* Click to add to page.

<figure><img src="/files/3uD1viTkenknP4H8E7sy" alt=""><figcaption></figcaption></figure>

## Icon

The Icon property allows you to add an  unwrapped SVG Icon to your page. This is useful for one-off SVG icons.

* Select SVG block.
* In the Primary tab, set Type to Icon.

<figure><img src="/files/1YAlX66JFXutX0tJnCqF" alt=""><figcaption></figcaption></figure>

### Select Icon

* Click "Icon" to open the Icon library or search for required icon.

<figure><img src="/files/2Ab7F6Id3EHAQ8eX8ape" alt=""><figcaption></figcaption></figure>

### Customise&#x20;

The Customise property allows you to modify your Icon as required including size, height, width, stroke as well as fill, stroke and text colours.

* Customise as required.

<figure><img src="/files/vG2CScMmRzpN6ybXMwzM" alt=""><figcaption></figcaption></figure>

## Image

The Image property allows you to add an SVG image to your page.&#x20;

{% hint style="info" %}
Imported images present a security risk. Although Cwicly sanitises them as well as possible, make sure you trust the source you import them from.
{% endhint %}

### Add

* Select SVG block.
* In the Primary tab, set Type to Image.

<figure><img src="/files/JNtbgTWrI3jsxUoqu4vl" alt=""><figcaption></figcaption></figure>

### SVG Uploads&#x20;

The SVG Uploads property enables you to upload SVG images to the media library.&#x20;

Cwicly sanitises SVGs but make sure you trust the source of the SVG before uploading it.

* Navigate to the Cwicly tab in the Dashboard.
* Open the Role Editor.
* In Miscellaneous, toggle SVG on to enable.

<figure><img src="/files/G5PaEPjkYTU7guDFd1dH" alt=""><figcaption></figcaption></figure>

### Set Source

The Source property allows you to set the source of the image, Static or Dynamic.

* Set source as required.

<figure><img src="/files/hlwWAbwToFrFfkXhUlFm" alt=""><figcaption></figcaption></figure>

### Customise

The Customise property allows you to modify your Image as required including size, height, width, stroke as well as fill, stroke and text colours.

* Customise as required.

<figure><img src="/files/Kkfm69OFlqkD8x4p7057" alt=""><figcaption></figcaption></figure>

## Inline

The Inline property allows you to add an SVG code snippet to your page.&#x20;

{% hint style="info" %}
Imported SVG snippets present a security risk. Although Cwicly sanitises them as well as possible, make sure you trust the source you import them from.
{% endhint %}

### Add

* Select SVG block.
* In the Primary tab, set Type to Inline.

<figure><img src="/files/LSYAz0CJLCB0Tu9MfIpl" alt=""><figcaption></figcaption></figure>

### Inline SVG&#x20;

Allows you to add inline SVGs.&#x20;

{% hint style="info" %}
Cwicly sanitises SVGs but make sure you trust the source of the SVG before adding it to your content.
{% endhint %}

* Navigate to the Cwicly tab in the Dashboard.
* Open the Role Editor.
* In Miscellaneous, toggle Inline SVG to enable.

<figure><img src="/files/arFsCptALtu9qS3SzVUO" alt=""><figcaption></figcaption></figure>

### SVG

The SVG property allows you to paste an SVG code snippet.

* Find the SVG field.
* Paste required SVG snippet.

<figure><img src="/files/cQfwqWbUIRpD2A9z9vLT" alt=""><figcaption></figcaption></figure>

### Customise

The Customise property allows you to modify your SVG snippet as required including size, height, width, stroke as well as fill, stroke and text colours.

* Customise as required.

<figure><img src="/files/z8opykzFNeGj5gRnCXQJ" alt=""><figcaption></figcaption></figure>