Custom Icon

Every customer receives a standard icon set at the start of their license. If you need more icons, contact us via support@arc-rider.com or in our Discord channel.

💡 Note: Custom Icon currently supports Phosphor Icons and OpenMoji icon sets. At this point, many thanks to the creators of the icons.

To add icons to your project, go to your user cockpit to the icons section and simply select them (see the explanation further down).

Application Code

arcCustomIcon({
		iconSet: "phosphor",
		name: "trash",
		containerSize: "40px",
		borderSize: "",
		borderColor: "",
		borderRadius: "7px",
		iconSize: "30px",
		color: "#FF2222",
		backgroundColor: "#fcdfde"
	})

arcCustomIcon({
	iconSet: "openmoji",
	name: "envelope-with-arrow-color",
	containerSize: "50px",
	borderSize: "1px",
	borderColor: "",
	iconSize: "50px",
	borderRadius: "50px",
	color: "#C637E4",
	backgroundColor: "#FAE6FF"
}),

iconSet defines the icon set. Currently, we have two on offer: Phosphor Icons and OpenMoji.

iconSet: "phosphor", // Dies ist auch der Fallback, falls du nichts angibts
iconSet: "openmoji",

name defines the title of your icon. You can find the titles in your cockpit.

name: "trash", // Titel immer in "" schreiben

containerSize defines whether and in what size you want to display your container/background of the icon.

containerSize: "30px", // Pixel-Wert in "" angeben
containerSize: "" // Kein Fallback-Wert

borderSize defines how thick your border should be.

borderSize: "1px", // Pixel-Wert in "" angeben
borderSize: "", // Kein Fallback-Wert

borderColor specifies the color of your border.

borderColor: "#000", // HEX Code in "" angeben
borderColor: "", // Kein Fallback-Wert

borderRadius specifies the rounding of your border corners.

borderRadius: "7px", // Pixel-Wert in "" angeben
borderRadius: "", // Kein Fallback

iconSize specifies the size of your icon.

iconSize: "20px", // Pixel-Wert in "" angeben
iconSize: "", // Fallback: "15px"

color specifies the color of your icon.

color: "#FF2222", // Hex-Wert in "" angeben
color: "", // Kein Fallback-Wert

backgroundColor specifies the background color of the container.

backgroundColor: "#fcdfde", // 
backgroundColor: "", // Kein Fallbackwert

Adding Icons through Your Cockpit

You can display your current collection and the available icon sets. You can find filters for icon styles or icon groups on the right side.

To select or deselect an icon, simply click on it.

Then copy the widget code and paste it into your global code. You can then use them in the application code.