Skip to main content

SVGIcons

Spicetify has a predefined set of SVG icons that are used by Spotify throughout the client. These are strings of SVG innerHTML that are used to create <svg> elements.

const SVGIcons = Record<SVGIcon, string>;
PropertyTypeDescription
keySVGIconSVG icon name.

Usage

You can use these icons to create custom menu items or other custom components.

In vanilla JavaScript, you can create an <svg> element and set its innerHTML to the SVG icon string.

const icon = document.createElement("svg");
icon.innerHTML = Spicetify.SVGIcons["play"];

In React, you can use the dangerouslySetInnerHTML prop to set the SVG icon string as the inner HTML of the <svg> element.

const icon = <svg dangerouslySetInnerHTML={{ __html: Spicetify.SVGIcons["play"] }} />;

In Spicetify's own methods, you can simply pass an SVGIcon to the icon parameter.

new Spicetify.ContextMenu.Item(
name: "My Custom Item".
onClick: () => Spicetify.showNotification("Hello World!"),
shouldAdd: () => true,
icon: "play",
disabled: false,
)