0.2.7

Usage

How to Use Colors

Utilities for controlling the color of an icon.

<div>
<RcRocketIconclassName="icon-amber-500" />
</div>
Class
Properties
 
icon-inherit
color: inherit
icon-current
color: currentColor
icon-transparent
color: transparent
icon-black
color: rgb(0 0 0)
icon-white
color: rgb(255 255 255)
icon-slate-50
color: rgb(248 250 252)
icon-slate-100
color: rgb(241 245 249)
icon-slate-200
color: rgb(226 232 240)
icon-slate-300
color: rgb(203 213 225)
icon-slate-400
color: rgb(148 163 184)
icon-slate-500
color: rgb(100 116 139)
icon-slate-600
color: rgb(71 85 105)
icon-slate-700
color: rgb(51 65 85)
icon-slate-800
color: rgb(30 41 59)
icon-slate-900
color: rgb(15 23 42)
icon-slate-950
color: rgb(2 6 23)
icon-gray-50
color: rgb(249 250 251)
icon-gray-100
color: rgb(243 244 246)
icon-gray-200
color: rgb(229 231 235)
icon-gray-300
color: rgb(209 213 219)
icon-gray-400
color: rgb(156 163 175)
icon-gray-500
color: rgb(107 114 128)
icon-gray-600
color: rgb(75 85 99)
icon-gray-700
color: rgb(55 65 81)
icon-gray-800
color: rgb(31 41 55)
icon-gray-900
color: rgb(17 24 39)
icon-gray-950
color: rgb(3 7 18)
icon-zinc-50
color: rgb(250 250 250)
icon-zinc-100
color: rgb(244 244 245)
icon-zinc-200
color: rgb(228 228 231)
icon-zinc-300
color: rgb(212 212 216)
icon-zinc-400
color: rgb(161 161 170)
icon-zinc-500
color: rgb(113 113 122)
icon-zinc-600
color: rgb(82 82 91)
icon-zinc-700
color: rgb(63 63 70)
icon-zinc-800
color: rgb(39 39 42)
icon-zinc-900
color: rgb(24 24 27)
icon-zinc-950
color: rgb(9 9 11)
icon-neutral-50
color: rgb(250 250 250)
icon-neutral-100
color: rgb(245 245 245)
icon-neutral-200
color: rgb(229 229 229)
icon-neutral-300
color: rgb(212 212 212)
icon-neutral-400
color: rgb(163 163 163)
icon-neutral-500
color: rgb(115 115 115)
icon-neutral-600
color: rgb(82 82 82)
icon-neutral-700
color: rgb(64 64 64)
icon-neutral-800
color: rgb(38 38 38)
icon-neutral-900
color: rgb(23 23 23)
icon-neutral-950
color: rgb(10 10 10)
icon-stone-50
color: rgb(250 250 249)
icon-stone-100
color: rgb(245 245 244)
icon-stone-200
color: rgb(231 229 228)
icon-stone-300
color: rgb(214 211 209)
icon-stone-400
color: rgb(168 162 158)
icon-stone-500
color: rgb(120 113 108)
icon-stone-600
color: rgb(87 83 78)
icon-stone-700
color: rgb(68 64 60)
icon-stone-800
color: rgb(41 37 36)
icon-stone-900
color: rgb(28 25 23)
icon-stone-950
color: rgb(12 10 9)
icon-red-50
color: rgb(254 242 242)
icon-red-100
color: rgb(254 226 226)
icon-red-200
color: rgb(254 202 202)
icon-red-300
color: rgb(252 165 165)
icon-red-400
color: rgb(248 113 113)
icon-red-500
color: rgb(239 68 68)
icon-red-600
color: rgb(220 38 38)
icon-red-700
color: rgb(185 28 28)
icon-red-800
color: rgb(153 27 27)
icon-red-900
color: rgb(127 29 29)
icon-red-950
color: rgb(69 10 10)
icon-orange-50
color: rgb(255 247 237)
icon-orange-100
color: rgb(255 237 213)
icon-orange-200
color: rgb(254 215 170)
icon-orange-300
color: rgb(253 186 116)
icon-orange-400
color: rgb(251 146 60)
icon-orange-500
color: rgb(249 115 22)
icon-orange-600
color: rgb(234 88 12)
icon-orange-700
color: rgb(194 65 12)
icon-orange-800
color: rgb(154 52 18)
icon-orange-900
color: rgb(124 45 18)
icon-orange-950
color: rgb(67 20 7)
icon-amber-50
color: rgb(255 251 235)
icon-amber-100
color: rgb(254 243 199)
icon-amber-200
color: rgb(253 230 138)
icon-amber-300
color: rgb(252 211 77)
icon-amber-400
color: rgb(251 191 36)
icon-amber-500
color: rgb(245 158 11)
icon-amber-600
color: rgb(217 119 6)
icon-amber-700
color: rgb(180 83 9)
icon-amber-800
color: rgb(146 64 14)
icon-amber-900
color: rgb(120 53 15)
icon-amber-950
color: rgb(69 26 3)
icon-yellow-50
color: rgb(254 252 232)
icon-yellow-100
color: rgb(254 249 195)
icon-yellow-200
color: rgb(254 240 138)
icon-yellow-300
color: rgb(253 224 71)
icon-yellow-400
color: rgb(250 204 21)
icon-yellow-500
color: rgb(234 179 8)
icon-yellow-600
color: rgb(202 138 4)
icon-yellow-700
color: rgb(161 98 7)
icon-yellow-800
color: rgb(133 77 14)
icon-yellow-900
color: rgb(113 63 18)
icon-yellow-950
color: rgb(66 32 6)
icon-lime-50
color: rgb(247 254 231)
icon-lime-100
color: rgb(236 252 203)
icon-lime-200
color: rgb(217 249 157)
icon-lime-300
color: rgb(190 242 100)
icon-lime-400
color: rgb(163 230 53)
icon-lime-500
color: rgb(132 204 22)
icon-lime-600
color: rgb(101 163 13)
icon-lime-700
color: rgb(77 124 15)
icon-lime-800
color: rgb(63 98 18)
icon-lime-900
color: rgb(54 83 20)
icon-lime-950
color: rgb(26 46 5)
icon-green-50
color: rgb(240 253 244)
icon-green-100
color: rgb(220 252 231)
icon-green-200
color: rgb(187 247 208)
icon-green-300
color: rgb(134 239 172)
icon-green-400
color: rgb(74 222 128)
icon-green-500
color: rgb(34 197 94)
icon-green-600
color: rgb(22 163 74)
icon-green-700
color: rgb(21 128 61)
icon-green-800
color: rgb(22 101 52)
icon-green-900
color: rgb(20 83 45)
icon-green-950
color: rgb(5 46 22)
icon-emerald-50
color: rgb(236 253 245)
icon-emerald-100
color: rgb(209 250 229)
icon-emerald-200
color: rgb(167 243 208)
icon-emerald-300
color: rgb(110 231 183)
icon-emerald-400
color: rgb(52 211 153)
icon-emerald-500
color: rgb(16 185 129)
icon-emerald-600
color: rgb(5 150 105)
icon-emerald-700
color: rgb(4 120 87)
icon-emerald-800
color: rgb(6 95 70)
icon-emerald-900
color: rgb(6 78 59)
icon-emerald-950
color: rgb(2 44 34)
icon-teal-50
color: rgb(240 253 250)
icon-teal-100
color: rgb(204 251 241)
icon-teal-200
color: rgb(153 246 228)
icon-teal-300
color: rgb(94 234 212)
icon-teal-400
color: rgb(45 212 191)
icon-teal-500
color: rgb(20 184 166)
icon-teal-600
color: rgb(13 148 136)
icon-teal-700
color: rgb(15 118 110)
icon-teal-800
color: rgb(17 94 89)
icon-teal-900
color: rgb(19 78 74)
icon-teal-950
color: rgb(4 47 46)
icon-cyan-50
color: rgb(236 254 255)
icon-cyan-100
color: rgb(207 250 254)
icon-cyan-200
color: rgb(165 243 252)
icon-cyan-300
color: rgb(103 232 249)
icon-cyan-400
color: rgb(34 211 238)
icon-cyan-500
color: rgb(6 182 212)
icon-cyan-600
color: rgb(8 145 178)
icon-cyan-700
color: rgb(14 116 144)
icon-cyan-800
color: rgb(21 94 117)
icon-cyan-900
color: rgb(22 78 99)
icon-cyan-950
color: rgb(8 51 68)
icon-sky-50
color: rgb(240 249 255)
icon-sky-100
color: rgb(224 242 254)
icon-sky-200
color: rgb(186 230 253)
icon-sky-300
color: rgb(125 211 252)
icon-sky-400
color: rgb(56 189 248)
icon-sky-500
color: rgb(14 165 233)
icon-sky-600
color: rgb(2 132 199)
icon-sky-700
color: rgb(3 105 161)
icon-sky-800
color: rgb(7 89 133)
icon-sky-900
color: rgb(12 74 110)
icon-sky-950
color: rgb(8 47 73)
icon-blue-50
color: rgb(239 246 255)
icon-blue-100
color: rgb(219 234 254)
icon-blue-200
color: rgb(191 219 254)
icon-blue-300
color: rgb(147 197 253)
icon-blue-400
color: rgb(96 165 250)
icon-blue-500
color: rgb(59 130 246)
icon-blue-600
color: rgb(37 99 235)
icon-blue-700
color: rgb(29 78 216)
icon-blue-800
color: rgb(30 64 175)
icon-blue-900
color: rgb(30 58 138)
icon-blue-950
color: rgb(23 37 84)
icon-indigo-50
color: rgb(238 242 255)
icon-indigo-100
color: rgb(224 231 255)
icon-indigo-200
color: rgb(199 210 254)
icon-indigo-300
color: rgb(165 180 252)
icon-indigo-400
color: rgb(129 140 248)
icon-indigo-500
color: rgb(99 102 241)
icon-indigo-600
color: rgb(79 70 229)
icon-indigo-700
color: rgb(67 56 202)
icon-indigo-800
color: rgb(55 48 163)
icon-indigo-900
color: rgb(49 46 129)
icon-indigo-950
color: rgb(30 27 75)
icon-violet-50
color: rgb(245 243 255)
icon-violet-100
color: rgb(237 233 254)
icon-violet-200
color: rgb(221 214 254)
icon-violet-300
color: rgb(196 181 253)
icon-violet-400
color: rgb(167 139 250)
icon-violet-500
color: rgb(139 92 246)
icon-violet-600
color: rgb(124 58 237)
icon-violet-700
color: rgb(109 40 217)
icon-violet-800
color: rgb(91 33 182)
icon-violet-900
color: rgb(76 29 149)
icon-violet-950
color: rgb(46 16 101)
icon-purple-50
color: rgb(250 245 255)
icon-purple-100
color: rgb(243 232 255)
icon-purple-200
color: rgb(233 213 255)
icon-purple-300
color: rgb(216 180 254)
icon-purple-400
color: rgb(192 132 252)
icon-purple-500
color: rgb(168 85 247)
icon-purple-600
color: rgb(147 51 234)
icon-purple-700
color: rgb(126 34 206)
icon-purple-800
color: rgb(107 33 168)
icon-purple-900
color: rgb(88 28 135)
icon-purple-950
color: rgb(59 7 100)
icon-fuchsia-50
color: rgb(253 244 255)
icon-fuchsia-100
color: rgb(250 232 255)
icon-fuchsia-200
color: rgb(245 208 254)
icon-fuchsia-300
color: rgb(240 171 252)
icon-fuchsia-400
color: rgb(232 121 249)
icon-fuchsia-500
color: rgb(217 70 239)
icon-fuchsia-600
color: rgb(192 38 211)
icon-fuchsia-700
color: rgb(162 28 175)
icon-fuchsia-800
color: rgb(134 25 143)
icon-fuchsia-900
color: rgb(112 26 117)
icon-fuchsia-950
color: rgb(74 4 78)
icon-pink-50
color: rgb(253 242 248)
icon-pink-100
color: rgb(252 231 243)
icon-pink-200
color: rgb(251 207 232)
icon-pink-300
color: rgb(249 168 212)
icon-pink-400
color: rgb(244 114 182)
icon-pink-500
color: rgb(236 72 153)
icon-pink-600
color: rgb(219 39 119)
icon-pink-700
color: rgb(190 24 93)
icon-pink-800
color: rgb(157 23 77)
icon-pink-900
color: rgb(131 24 67)
icon-pink-950
color: rgb(80 7 36)
icon-rose-50
color: rgb(255 241 242)
icon-rose-100
color: rgb(255 228 230)
icon-rose-200
color: rgb(254 205 211)
icon-rose-300
color: rgb(253 164 175)
icon-rose-400
color: rgb(251 113 133)
icon-rose-500
color: rgb(244 63 94)
icon-rose-600
color: rgb(225 29 72)
icon-rose-700
color: rgb(190 18 60)
icon-rose-800
color: rgb(159 18 57)
icon-rose-900
color: rgb(136 19 55)
icon-rose-950
color: rgb(76 5 25)

Basic usage

Setting the icon color

Use the icon-{color} utilities to control the color of an icon.

Default color palette

Icons are available in all of Tailwind's default color palette and shares the colors configuration.
Follow the official color customization documentation to add your customized palette.

  • slate
    slate
    slate-50
    slate-100
    slate-200
    slate-300
    slate-400
    slate-500
    slate-600
    slate-700
    slate-800
    slate-900
    slate-950
  • gray
    gray
    gray-50
    gray-100
    gray-200
    gray-300
    gray-400
    gray-500
    gray-600
    gray-700
    gray-800
    gray-900
    gray-950
  • zinc
    zinc
    zinc-50
    zinc-100
    zinc-200
    zinc-300
    zinc-400
    zinc-500
    zinc-600
    zinc-700
    zinc-800
    zinc-900
    zinc-950
  • neutral
    neutral
    neutral-50
    neutral-100
    neutral-200
    neutral-300
    neutral-400
    neutral-500
    neutral-600
    neutral-700
    neutral-800
    neutral-900
    neutral-950
  • stone
    stone
    stone-50
    stone-100
    stone-200
    stone-300
    stone-400
    stone-500
    stone-600
    stone-700
    stone-800
    stone-900
    stone-950
  • red
    red
    red-50
    red-100
    red-200
    red-300
    red-400
    red-500
    red-600
    red-700
    red-800
    red-900
    red-950
  • orange
    orange
    orange-50
    orange-100
    orange-200
    orange-300
    orange-400
    orange-500
    orange-600
    orange-700
    orange-800
    orange-900
    orange-950
  • amber
    amber
    amber-50
    amber-100
    amber-200
    amber-300
    amber-400
    amber-500
    amber-600
    amber-700
    amber-800
    amber-900
    amber-950
  • yellow
    yellow
    yellow-50
    yellow-100
    yellow-200
    yellow-300
    yellow-400
    yellow-500
    yellow-600
    yellow-700
    yellow-800
    yellow-900
    yellow-950
  • lime
    lime
    lime-50
    lime-100
    lime-200
    lime-300
    lime-400
    lime-500
    lime-600
    lime-700
    lime-800
    lime-900
    lime-950
  • green
    green
    green-50
    green-100
    green-200
    green-300
    green-400
    green-500
    green-600
    green-700
    green-800
    green-900
    green-950
  • emerald
    emerald
    emerald-50
    emerald-100
    emerald-200
    emerald-300
    emerald-400
    emerald-500
    emerald-600
    emerald-700
    emerald-800
    emerald-900
    emerald-950
  • teal
    teal
    teal-50
    teal-100
    teal-200
    teal-300
    teal-400
    teal-500
    teal-600
    teal-700
    teal-800
    teal-900
    teal-950
  • cyan
    cyan
    cyan-50
    cyan-100
    cyan-200
    cyan-300
    cyan-400
    cyan-500
    cyan-600
    cyan-700
    cyan-800
    cyan-900
    cyan-950
  • sky
    sky
    sky-50
    sky-100
    sky-200
    sky-300
    sky-400
    sky-500
    sky-600
    sky-700
    sky-800
    sky-900
    sky-950
  • blue
    blue
    blue-50
    blue-100
    blue-200
    blue-300
    blue-400
    blue-500
    blue-600
    blue-700
    blue-800
    blue-900
    blue-950
  • indigo
    indigo
    indigo-50
    indigo-100
    indigo-200
    indigo-300
    indigo-400
    indigo-500
    indigo-600
    indigo-700
    indigo-800
    indigo-900
    indigo-950
  • violet
    violet
    violet-50
    violet-100
    violet-200
    violet-300
    violet-400
    violet-500
    violet-600
    violet-700
    violet-800
    violet-900
    violet-950
  • purple
    purple
    purple-50
    purple-100
    purple-200
    purple-300
    purple-400
    purple-500
    purple-600
    purple-700
    purple-800
    purple-900
    purple-950
  • fuchsia
    fuchsia
    fuchsia-50
    fuchsia-100
    fuchsia-200
    fuchsia-300
    fuchsia-400
    fuchsia-500
    fuchsia-600
    fuchsia-700
    fuchsia-800
    fuchsia-900
    fuchsia-950
  • pink
    pink
    pink-50
    pink-100
    pink-200
    pink-300
    pink-400
    pink-500
    pink-600
    pink-700
    pink-800
    pink-900
    pink-950
  • rose
    rose
    rose-50
    rose-100
    rose-200
    rose-300
    rose-400
    rose-500
    rose-600
    rose-700
    rose-800
    rose-900
    rose-950