---
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: Vue 3
source: https://surveyjs.io/survey-creator/examples/add-custom-icons-to-survey-creator-user-interface/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Add Custom Icons (Vue 3)

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
<div id="app" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></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/App.vue`

```html
<template>
    <SurveyCreatorComponent :model="creator" />
</template>
<script setup lang="ts">
    import { SurveyCreatorModel } from "survey-creator-core";
    import { SurveyCreatorComponent } from "survey-creator-vue";
    import { SvgRegistry } from "survey-core";
    import { iconSettingsSvg } from "./icons";
    import "survey-core/survey.i18n";
    import "survey-creator-core/survey-creator-core.i18n";
    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);
    const creator = new SurveyCreatorModel();
</script>
```

### `src/index.css`

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

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-vue3-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-vue": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/add-custom-icons-to-survey-creator-user-interface/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/add-custom-icons-to-survey-creator-user-interface/reactjs.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)