---
title: Custom Icons
product: Form Library
description: Learn how to add visual impact and give your survey a fresh look by replacing the default icons used in questions with various custom icons. For example, you can use crosses instead of ticks in the checkboxes to customize choice options if that better suits your needs and preferences. Follow our free demo for JavaScript to create a more dynamic and engaging survey experience.
framework: jQuery
source: https://surveyjs.io/form-library/examples/custom-icons/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Custom Icons (jQuery)

SurveyJS Form Library ships with a vast collection of [built-in SVG icons](/documentation/icons#built-in-svg-icons). You can also use custom SVG icons if required. This example shows how you can replace built-in "tick" icons in a Checkboxes question with custom "cross" icons.

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

1. Obtain an SVG icon.\
You can fetch an SVG icon from a file or embed SVG content 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) to replace as the first argument and the custom icon markup as the second argument. Refer to the code listing for an example.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/index.css`

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

### `src/index.js`

```js
import $ from "jquery";
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";
import { SvgRegistry } from "survey-core";

// Embed an SVG icon in code:
const customIcon = '<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M11.35 1.34999L10.65 0.649994L6.05002 5.24999L1.35002 0.649994L0.650024 1.34999L5.25002 6.04999L0.650024 10.65L1.35002 11.35L6.05002 6.74999L10.65 11.35L11.35 10.65L6.75002 6.04999L11.35 1.34999Z"/></svg>';
SvgRegistry.registerIcon("icon-v2check", customIcon);

// ... or fetch an icon from a file
// fetch("https://path/to/the/icon.svg")
//   .then(response => response.text())
//   .then(svg => {
//     SvgRegistry.registerIcon("icon-v2check", svg);
//   });

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
});

$("#surveyElement").Survey({ model: survey });
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "checkbox",
      "name": "car",
      "title": "Which is the brand of your car?",
      "isRequired": true,
      "showNoneItem": true,
      "colCount": 2,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota" ],
      "defaultValue": [ "Ford" ]
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/custom-icons/angular.md)
- [React](https://surveyjs.io/form-library/examples/custom-icons/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/custom-icons/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/custom-icons/vanillajs.md)