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

# Icon

The **Icon block** allows you to display a graphical element or an uploaded image, optionally linking it to an important page. You can customize the image/icon choice, set its size for both desktop and mobile, and define link behavior.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FQZ3mr5HCIuHVfyDWmEX8%2Fimage.png?alt=media&amp;token=51a6d744-54d4-45f5-b6ad-d16e56549bab" alt=""><figcaption></figcaption></figure>

## General

<table><thead><tr><th width="255.5999755859375"></th><th></th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Allows you to upload a custom image to use instead of a predefined SVG icon.</td></tr><tr><td><strong>Svg icon</strong></td><td>Select the theme's available icon set</td></tr><tr><td><strong>Link</strong></td><td>The URL the icon/image navigates to when clicked. This can be an internal page, product, or an external link.</td></tr><tr><td><strong>Open link in new tab</strong></td><td>A checkbox that, when enabled, ensures the linked URL opens in a new browser tab when the icon/image is clicked.</td></tr></tbody></table>

## Sizing

<table><thead><tr><th width="147.4000244140625">Setting</th><th width="121.5999755859375">Applies To</th><th>Description</th></tr></thead><tbody><tr><td>Image Width</td><td>Desktop</td><td>Defines the width of the icon or image on larger screens, measured in pixels (px) (Range: 20px to 200px).</td></tr><tr><td>Mobile Image Width</td><td>Mobile</td><td>Defines the width of the icon or image specifically on mobile devices, measured in pixels (px) (Range: 20px to 200px).</td></tr></tbody></table>