UI Icons
This help topic describes icons built into SurveyJS components and shows how you can replace them with custom icons.
Built-In Icons
SurveyJS uses icons in SVG format. The following built-in SVG icons are available:
The following code shows how you can swap two built-in icons. It uses the icon-export icon instead of icon-import, and vice versa:
Survey.settings.customIcons["icon-import"] = "icon-export";
Survey.settings.customIcons["icon-export"] = "icon-import";
// In modular applications:
import { settings } from "survey-core";
settings.customIcons["icon-import"] = "icon-export";
settings.customIcons["icon-export"] = "icon-import";
Custom Icons
If you want to replace a built-in icon with a custom SVG icon, call the registerIconFromSvg method on the SvgRegistry object. Pass the name of the built-in icon as the first argument and the custom icon markup converted to a string as the second argument. In the following code, a custom icon replaces the icon-delete icon:
// Option 1: Embed an SVG icon in code:
const customIcon = '<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="..."/></svg>';
Survey.SvgRegistry.registerIconFromSvg("icon-delete", customIcon);
// Option 2: Fetch an icon from a file
fetch("./my-icon.svg")
.then(response => response.text())
.then(svg => {
Survey.SvgRegistry.registerIconFromSvg("icon-delete", svg);
});
// Option 2 in React:
import { SvgRegistry } from "survey-core";
import { ReactComponent as MyIcon } from "./my-icon.svg";
import ReactDOMServer from "react-dom/server";
const svg = ReactDOMServer.renderToString(<MyIcon />);
SvgRegistry.registerIconFromSvg("icon-delete", svg);