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>;

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,
)