Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Tools
    •

    Icons

    Token Value Resolved Deprecated Deprecated comment Replaced by
    icon-color-inverse {gray-50} light: rgb(248, 248, 248); dark: rgb(27, 27, 27); wireframe: rgb(246, 248, 253) Yes - -
    icon-color-primary-default {neutral-content-color-default} light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) No - -
    icon-color-blue-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-green-primary-default {green-800} light: rgb(7, 147, 85); dark: rgb(6, 136, 80); wireframe: rgb(93, 127, 201) No - -
    icon-color-red-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-yellow-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-primary-hover {neutral-content-color-hover} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    icon-color-primary-down {neutral-content-color-down} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    icon-color-blue-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-blue-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-brown-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-brown-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-brown-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-celery-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-celery-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-celery-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-chartreuse-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-chartreuse-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-chartreuse-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-cinnamon-primary-default {cinnamon-800} dark: rgb(176, 98, 59); light: rgb(184, 109, 70); wireframe: rgb(93, 127, 201) No - -
    icon-color-cinnamon-primary-hover {cinnamon-900} dark: rgb(192, 119, 80); light: rgb(170, 94, 56); wireframe: rgb(74, 111, 195) No - -
    icon-color-cinnamon-primary-down {cinnamon-1000} dark: rgb(206, 136, 99); light: rgb(147, 77, 43); wireframe: rgb(61, 94, 165) No - -
    icon-color-cyan-primary-default {cyan-800} light: rgb(18, 134, 205); dark: rgb(13, 125, 186); wireframe: rgb(93, 127, 201) No - -
    icon-color-cyan-primary-hover {cyan-900} light: rgb(11, 120, 179); dark: rgb(24, 142, 220); wireframe: rgb(74, 111, 195) No - -
    icon-color-cyan-primary-down {cyan-1000} light: rgb(4, 102, 145); dark: rgb(38, 159, 244); wireframe: rgb(61, 94, 165) No - -
    icon-color-fuchsia-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-fuchsia-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-fuchsia-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-green-primary-hover {green-900} light: rgb(5, 131, 78); dark: rgb(9, 157, 89); wireframe: rgb(74, 111, 195) No - -
    icon-color-green-primary-down {green-1000} light: rgb(3, 110, 69); dark: rgb(14, 175, 98); wireframe: rgb(61, 94, 165) No - -
    icon-color-indigo-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-indigo-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-indigo-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-magenta-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-magenta-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-magenta-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-orange-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-orange-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-orange-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-pink-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-pink-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-pink-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-purple-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-purple-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-purple-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-red-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-red-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-seafoam-primary-default {seafoam-800} light: rgb(9, 144, 120); dark: rgb(8, 134, 112); wireframe: rgb(93, 127, 201) No - -
    icon-color-seafoam-primary-hover {seafoam-900} light: rgb(7, 129, 109); dark: rgb(10, 154, 128); wireframe: rgb(74, 111, 195) No - -
    icon-color-seafoam-primary-down {seafoam-1000} light: rgb(5, 108, 92); dark: rgb(12, 173, 142); wireframe: rgb(61, 94, 165) No - -
    icon-color-silver-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-silver-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-silver-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-turquoise-primary-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-turquoise-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-turquoise-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-yellow-primary-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-yellow-primary-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-disabled-primary {gray-400} light: rgb(198, 198, 198); dark: rgb(68, 68, 68); wireframe: rgb(180, 199, 239) No - -
    icon-color-blue-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-brown-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-celery-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-chartreuse-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-cinnamon-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-cyan-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-fuchsia-background {fuchsia-200} light: rgb(253, 233, 255); dark: rgb(61, 0, 74); wireframe: rgb(235, 239, 248) No - -
    icon-color-green-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-indigo-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-magenta-background {magenta-200} light: rgb(255, 232, 240); dark: rgb(74, 0, 27); wireframe: rgb(235, 239, 248) No - -
    icon-color-orange-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-pink-background {pink-200} dark: rgb(71, 0, 44); light: rgb(255, 232, 247); wireframe: rgb(235, 239, 248) No - -
    icon-color-purple-background {purple-200} light: rgb(244, 235, 252); dark: rgb(50, 0, 96); wireframe: rgb(235, 239, 248) No - -
    icon-color-red-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-seafoam-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-silver-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-turquoise-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-yellow-background - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    icon-color-inverse-background {gray-50} light: rgb(248, 248, 248); dark: rgb(27, 27, 27); wireframe: rgb(246, 248, 253) No - -
    icon-color-emphasized-background {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -