UI Icons
This help topic describes SVG icons built into SurveyJS Form Library and Survey Creator and shows how you can customize them.
Built-In SVG Icons
Form Library Icons
The following SVG icons are available if your application includes the survey-core bundle or package:
Survey Creator Icons
The SVG icons below are available if your application includes the survey-creator-core bundle or package. It depends on the survey-core bundle, and thus makes Form Library icons available as well.
Icon Customization
Swap Two Built-In Icons
Swapping two built-in icons allows you to use one icon from SurveyJS Form Library or Survey Creator instead of another, and vice versa. The following code shows how to swap the icon-export and icon-import icons:
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";
Use Custom SVG 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);