The icon can be provided in different ways to help you fine-tune its appearance.
type Icon =
| string
| {
light: string;
dark: string;
| {
monochrome: string;
Slapdash supports loading icons over http:// , https://, using Data URLs or providing the raw icon content inline.
// Emoji can be provided inline. All Unicode Emoticons are supported.
icon: "🧛‍♂️"
// Icons accessible over HTTP/HTTPS can be provided as an absolute URL.
icon: ""
// SVGs can be provided inline.
icon: '<svg xmlns="" height="24" width="24" fill="none" stroke="#000" stroke-width="2" ><circle cx="12" cy="12" r="10"/></svg>'
// Icons can be encoded as Data URLs and provided inline. The following
// formats are supported: image/png, image/jpeg, image/gif, image/svg+xml.


By default, Slapdash will display icons "as is" but you can choose to render different icons depending on the selected theme:
icon: {
light: "🌞",
dark: "🌔"
Or, you can tell Slapdash to automatically adjust the icon color based on the current theme:
icon: {
monochrome: ""
In this case, Slapdash will replace all non-transparent pixels of the icon with the appropriate color from the selected theme.