# Illustration

Abyssale supports the following illustration packages:

* [Feather icons](https://feathericons.com/) (Icons)
* [Undraw](https://undraw.co/) (Illustrations)
* [Material icons](https://fonts.google.com/icons) (Icons)
* [Twemoji](https://twemoji.twitter.com/) (Emojis)

#### Available properties:

<table><thead><tr><th width="293">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>illustration_type</code></strong></td><td><p><strong>The illustration library</strong> that will be used to retrieve the related illustration name. </p><p></p><p>Supported values: </p><ul><li><code>undraw</code></li><li><code>feather</code></li><li><code>twemoji</code></li><li><code>material_icons</code></li></ul></td></tr><tr><td><strong><code>illustration_file</code></strong></td><td><p><strong>The illustration name</strong>. It corresponds to:</p><ul><li>Feather icons: The name given on the feature icons website.</li><li>Undraw: The name of the related illustration file <em>(without the file extension)</em></li><li>Material Icons: The icon id (example: <code>visibility_off</code>)</li><li>Twemoji: Name of the emoji. You can found the list <a href="https://s3.eu-west-1.amazonaws.com/api-reference.s3.bucket/twemoji-mapping.txt">here</a>.</li></ul></td></tr><tr><td><strong><code>illustration_properties</code></strong></td><td><a href="#illustration-properties">Go to Illustration properties documentation</a></td></tr><tr><td><strong><code>alignment</code></strong></td><td><a href="/pages/a4rp3kJ076WHb3jZcVqP#text-alignment">Go to Alignment documentation</a></td></tr><tr><td><strong><code>opacity</code></strong></td><td>Integer between 0 and 100. <strong>Opacity of the image</strong></td></tr></tbody></table>

### Illustration Properties <a href="#illustration-properties" id="illustration-properties"></a>

**Undraw**, **feather** and **material icons** can have an `illustration_properties` property.

<table><thead><tr><th width="292">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>primary_color</code></strong></td><td><p>String: <a href="/pages/EEHnfOWxoSTaxz6N7LhN#image-background">6-8 digits hexa color</a> or <a href="/pages/EEHnfOWxoSTaxz6N7LhN#cmyka">cmyka format</a> (for print) <strong>Color of the illustration.</strong></p><p></p><p><mark style="color:purple;">This attribute should be located within the "<code>illustration_properties</code>" section of your post code.</mark></p></td></tr></tbody></table>

#### Examples:

<table data-header-hidden><thead><tr><th width="466"></th><th></th></tr></thead><tbody><tr><td><p><code>"illustration_file": "tropical_fish"</code></p><p><code>"alignment": "middle center"</code></p></td><td><img src="/files/hG3NcqpJE1M3AwouMbvh" alt=""></td></tr><tr><td><p><code>"opacity": 68,</code></p><p><code>"illustration_file": "happy_2021",</code></p><p><code>"illustration_properties": {</code></p><p>       <code>"primary_color": "#FF0000"</code> </p><p><code>}</code></p></td><td><img src="/files/wbtC15B0gw4NmQSq3fTh" alt=""></td></tr><tr><td><p><code>"opacity": 68,</code></p><p><code>"illustration_file": "happy_2021",</code></p><p><code>"illustration_properties": {</code></p><p>   <code>"primary_color":"cmyka(0,100,100,0,100)"</code> </p><p><code>}</code></p></td><td><img src="/files/wbtC15B0gw4NmQSq3fTh" alt=""></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.abyssale.com/rest-api/generation/element-properties/illustration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.