> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/basic/icon.md).

# Icon

Displays a small icon from the built-in library or your own upload, with size, shape, and color controls.

Use it for visual accents, feature highlights, or quick visual cues next to text. Choose from a built-in icon library or upload your own, then control its size and style independently.

### 1. What you can do

With the Icon block, you can:

* Display an icon from a built-in library, or upload your own custom icon
* Choose from preset icon sizes or set a custom size, independently for desktop and mobile
* Show the icon on its own, or wrap it in a filled or outlined box
* Set the icon's color to Strong, Base, Light, or Subtle

### 2. How to add an Icon block

You can add an Icon block to any custom section or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Click the section or block**

In the Theme Editor (Customize), click the section or block where you want to add an icon.
{% endstep %}

{% step %}
**Add an icon block**

Click **Add block**.
{% endstep %}

{% step %}
**Select Icon**

Select **Icon** from the block list.
{% endstep %}

{% step %}
**Choose or upload your icon**

Under **Source**, select **Library** or **Upload**, then select or upload your icon.
{% endstep %}

{% step %}
**Adjust the settings**

Control size and style using the settings described below.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Block settings

<details>

<summary>Icon</summary>

<table><thead><tr><th width="96.4375">Setting</th><th width="162.76171875">Options</th><th width="466.69921875">When to use</th></tr></thead><tbody><tr><td><strong>Source</strong></td><td><ul><li>Library</li><li>Upload</li></ul></td><td><ul><li>Choose <strong>Library</strong> to pick from the theme's built-in icon collection.</li><li>Choose <strong>Upload</strong> to use your own custom icon image instead.</li></ul></td></tr><tr><td><strong>Choose icon</strong></td><td>Curated icon selector</td><td>Available when Source is set to Library. Allows you to search and select a specific graphic from the built-in theme icon collection.</td></tr><tr><td><strong>Icon size</strong></td><td><ul><li>12–44px presets</li><li>Custom</li></ul></td><td>Pick a preset for consistency with other icons in your theme, or choose <strong>Custom</strong> to set an exact pixel value.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

These settings control whether the icon stands alone or sits inside a shape, and how strong its color appears.

<table><thead><tr><th width="96.8203125">Setting</th><th width="140.2734375">Options</th><th width="446.0546875">What it does</th></tr></thead><tbody><tr><td><strong>Style</strong></td><td><ul><li>Classic</li><li>Boxed</li></ul></td><td><ul><li><strong>Classic</strong> shows the icon on its own, with no background shape</li><li><strong>Boxed</strong> wraps the icon inside a shape, useful for giving it more visual weight or matching a button-like treatment elsewhere on the page</li></ul></td></tr><tr><td><strong>Box style</strong></td><td><ul><li>Fill</li><li>Outline</li></ul></td><td><ul><li><strong>Fill</strong> shows a solid background color behind the icon</li><li><strong>Outline</strong> shows just a bordered shape with no fill</li></ul><p><em>Only available when Style is set to <strong>Boxed</strong>.</em></p></td></tr><tr><td><strong>Shape</strong></td><td><ul><li>Square</li><li>Rounded</li><li>Circle</li></ul></td><td><p>Match your store's overall <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner">main corner</a> for visual consistency.</p><ul><li><strong>Square:</strong> Use if your main corner is <code>0px</code></li><li><strong>Rounded:</strong> Use if your main corner radius is <code>10px</code> or <code>20px</code>.</li><li><strong>Circle/Pill:</strong> Use if your main corner is <code>30px</code></li></ul><p><em>When <strong>Rounded</strong> is selected, reveals the <strong>Corner radius</strong> setting (Main corner, Small, Extra small, None, Custom) along with a custom pixel slider when Custom is chosen.</em></p></td></tr><tr><td><strong>Icon color</strong></td><td><ul><li>Strong</li><li>Base</li><li>Light</li><li>Subtle</li></ul></td><td>Sets the color for the icon.</td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="101.83984375">Setting</th><th width="129.69921875">Options</th><th width="451.16015625">When to use</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Single pixel value</td><td>Sets the spacing between the icon and its surrounding edge (10px–100px). This is a single range value, not a per-side control. Most visible when Style is set to Boxed.</td></tr><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables custom margin spacing around the Icon block, with individual top, bottom, left, and right pixel controls.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding and margin values for mobile screens. <em>Mobile margin is only available when <strong>Margin</strong> is On.</em></td></tr></tbody></table>

</details>