> For the complete documentation index, see [llms.txt](https://help.brickspacelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.brickspacelab.com/slab/advanced-customizations/making-changes/using-custom-icons.md).

# Use custom icons

The theme includes 60+ icons available through the [Icon block](https://github.com/BrickspaceLab/docs/blob/main/content/blocks/basics/icon.md). If you need an icon that is not part of the default set, you have two options: add a custom icon via code, or use the Image block to display any image as an icon.

## Option 1: Add a custom icon via code

{% stepper %}
{% step %}
**Prepare your SVG file**

* Obtain or create the icon you want to add in SVG format.
* Optimize the SVG to remove unnecessary attributes and reduce file size. [SVGOMG](https://jakearchibald.github.io/svgomg/) is a free tool you can use for this.
  {% endstep %}

{% step %}
**Upload the SVG file**

* Open your Shopify admin and navigate to **Content > Files**.
* Upload your `.svg` file.
* Once uploaded, copy the file URL provided by Shopify.
  {% endstep %}

{% step %}
**Edit theme code**

* Open the theme editor and navigate to **Actions > Edit code**.
* Locate the `theme__icons.liquid` snippet inside the **Snippets** folder.
* Find the `{% case icon %}` block and add a new entry for your icon. Replace `my-custom-icon` with the name you want to use and update the `src` with the file URL copied in the previous step.
* Save the file. Your custom icon will now be available for selection in the Icon block picker.
  {% endstep %}
  {% endstepper %}

## Option 2: Use the Image block (no code required)

If you only need to display a single custom icon without modifying theme code, the [Image block](https://github.com/BrickspaceLab/docs/blob/main/content/blocks/basics/icon.md) is a simpler alternative.

* Add an **Image** block to any section in the theme editor.
* Use the image picker to upload your icon file (`.png`, `.svg`, `.webp`, etc.).
* Adjust the **Width** setting to control the display size of the icon.

Refer to the [Image block documentation](https://github.com/BrickspaceLab/docs/blob/main/content/blocks/basics/image.md) for a full list of available settings including spacing, color scheme, alignment, and border options.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.brickspacelab.com/slab/advanced-customizations/making-changes/using-custom-icons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.