# Custom Icon

In addition to system‑provided icons, **ONEWEB Page Designer** allows users to upload and use **custom icons**.\
This feature enables applications to follow **brand guidelines**, improve visual clarity, and create a more customized user experience.

Currently, Page Designer supports custom icons in the following format:

* **SVG (Scalable Vector Graphics)**

> **Limitation:**\
> Multi‑color SVG icons are **not supported**. Custom icons should be **single‑color SVG files** to ensure proper rendering.

Once uploaded, custom icons become available throughout Page Designer and can be used just like built‑in system icons.

***

### How to Upload Custom Icons

#### Step 1: Open Icons Resource

1. Open **Page Designer**
2. Navigate to the **RESOURCES** tab
3. Select the **Icons** sub‑tab

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FBpvOhp3qTaKb7RoQSzWr%2Fimage.png?alt=media&#x26;token=53f9ca36-e568-43e3-872c-0f2545b2e82d" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Open Icons under Resources</em></p>

***

#### Step 2: Upload Icon Files

1. Click **Upload Icon**
2. Select SVG icon files from your local machine\
   **or**
3. Drag and drop SVG files directly into the upload area

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F4DaWA7zEaR8daS5oBrSz%2Fimage.png?alt=media&#x26;token=f58405ff-d698-4a04-a69f-351721258236" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Upload or drag‑and‑drop SVG icon files</em></p>

After the upload is complete, the icons are registered and ready for use.

***

### Use Custom Icons in Page Designer

Once uploaded:

* Custom icons appear in the **Icon selection list**
* Icons can be applied to:
  * Buttons
  * Menus
  * Navigation elements
  * Other icon‑enabled UI components

Custom icons can be reused consistently across:

* Individual pages
* Shared Header & Footer
* Web and mobile applications

***

### Design Perspective

As part of **Page Designer best practices**:

* Use custom icons to reinforce branding and improve usability
* Keep icons simple and single‑color for compatibility
* Avoid uploading unnecessary icon variants
* Apply icons consistently across navigation and actions

Well‑designed icons help users recognize actions quickly and improve overall UX.


---

# 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://docs.onewebstack.com/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/pages/page-features/custom-icon.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.