---
title: Add Custom Icons
product: Survey Creator
description: SurveyJS lets you customize the entire Survey Creator UI as your needs require. For example, you can replace the built-in icons of the toolbar or add new ones to provide additional functionality. View a free demo example for JavaScript to learn more.
framework: React
source: https://surveyjs.io/survey-creator/examples/add-custom-icons-to-survey-creator-user-interface/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Add Custom Icons (React)

Survey Creator includes a comprehensive set of [built-in SVG icons](/documentation/icons#built-in-svg-icons). If needed, you can also use custom SVG icons. The following example demonstrates how to replace the built-in **Survey settings** icon in the toolbar with a custom one.

To use a custom SVG icon, follow the steps below:

1. Obtain an SVG icon.\
You can either load an SVG from a file or embed the SVG markup directly in your code.

1. Register the custom icon.\
Call the `registerIcon` method on the `SvgRegistry` object. Pass the name of the [built-in icon](/documentation/icons#built-in-svg-icons) you want to replace as the first argument and your custom SVG markup as the second. Refer to the code listing for an example.

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/icons.js`

```js
export const iconSettingsSvg = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M841.638649 555.271526c1.775436-14.201443 3.106758-28.625968 3.106758-43.271526 0-14.645558-1.331321-29.069059-3.106758-43.271526l93.865831-73.449849c8.432043-6.656607 10.873652-18.639522 5.325285-28.40391l-88.76158-153.779386c-5.547343-9.54233-17.087167-13.536294-27.072589-9.54233l-110.508883 44.602847c-22.856567-17.530258-47.931662-32.397874-75.003228-43.715641L622.841457 86.830601c-1.997494-10.429537-11.095709-18.639522-22.190395-18.639522l-177.523159 0c-11.095709 0-20.192901 8.209986-21.968337 18.639522l-16.643052 117.609605c-27.072589 11.316743-52.147684 25.962302-75.003228 43.715641l-110.50786-44.602847c-9.985422-3.771907-21.524223 0-27.072589 9.54233l-88.76158 153.779386c-5.547343 9.54233-3.106758 21.524223 5.325285 28.40391l93.643774 73.449849c-1.775436 14.201443-3.106758 28.625968-3.106758 43.271526 0 14.645558 1.331321 29.069059 3.106758 43.271526l-93.643774 73.449849c-8.432043 6.656607-10.873652 18.639522-5.325285 28.40391l88.76158 153.779386c5.547343 9.54233 17.086144 13.536294 27.072589 9.54233l110.508883-44.602847c22.856567 17.530258 47.931662 32.397874 75.003228 43.715641l16.643052 117.609605c1.775436 10.429537 10.873652 18.639522 21.968337 18.639522l177.523159 0c11.095709 0 20.192901-8.209986 21.968337-18.639522l16.643052-117.609605c27.072589-11.316743 52.147684-25.962302 75.003228-43.715641l110.50786 44.602847c9.985422 3.771907 21.525246 0 27.072589-9.54233l88.76158-153.779386c5.547343-9.54233 3.106758-21.524223-5.325285-28.40391L841.638649 555.271526zM511.88846 667.332764c-85.876879 0-155.332764-69.455885-155.332764-155.332764s69.455885-155.332764 155.332764-155.332764c85.876879 0 155.332764 69.455885 155.332764 155.332764S597.765339 667.332764 511.88846 667.332764z" fill="#E50A3E"/></svg>';
```

### `src/SurveyCreatorComponent.jsx`

```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { SvgRegistry } from "survey-core";
import { iconSettingsSvg } from "./icons";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";

import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

// Register a custom icon
SvgRegistry.registerIcon("settings", iconSettingsSvg);
function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator();
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

const root = createRoot(document.getElementById("surveyCreatorContainer"));
root.render(<SurveyCreatorRenderComponent />);
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-react": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/add-custom-icons-to-survey-creator-user-interface/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/add-custom-icons-to-survey-creator-user-interface/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/add-custom-icons-to-survey-creator-user-interface/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/add-custom-icons-to-survey-creator-user-interface/vanillajs.md)