Confused about official adobe spectrum icons source, any advice?

InDesign
1

Hi everyone,

I’m a bit confused about where we’re supposed to get our official Spectrum icons from. I found the Spectrum design icons here: Spectrum Icons, but it says clearly, “These icons are only to be used for design. When engineering your product, you can find the icon implementations in A4U,” yet the provided link to “A4U” is broken.

I also came across these sources:

Does anyone know the official process or the correct, up-to-date source we should use for implementation?

Thanks in advance for your help!

2

Here’s an example of how I render UI icons in one of my InDesign plugins.

<sp-icon name="ui:HelpMedium" size="s" slot="icon" />

I get the name field from the “UI Icons” tab of Spectrum Icons. Documentation seems to be all over the place at the moment…

3

I build nearly all of my dialogs and panels using a programmatic approach. I had struggled getting the icons working correctly. They kept showing the alert icon rather than the ones I wanted. I finally figured out the way to make them display correctly was by using .setAttribute() to set the name, size, and slot. As an example of that:

dialog_o.icon_o = document.createElement("sp-icon");

dialog_o.icon_o.setAttribute("name", "ui:InfoMedium");
dialog_o.icon_o.setAttribute("size", "m");
dialog_o.icon_o.setAttribute("slot", "icon");

dialog_o.icon_o.style.color = "blue";

dialog_o.icon_o.classList.add("dialog-s-icon");

dialog_o.appendChild(dialog_o.icon_o);
  • dialog_o points to my dialog
  • It is not necessary to set the element to be a part of the dialog; I tend to do so to provide direct access if needed in the future. Thus, rather than dialog_o.icon_o = you could use let icon =, for example.
  • The dialog-s-icon class is in my .css file and is used to force some space above. You could just set the .style for that here.