Stroke

Set the stroke color for SVG elements.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

s-red-1

stroke: #fbdfe1;

s-red-2

stroke: #f8c4c8;

s-red-3

stroke: #f4a8ae;

s-red-4

stroke: #f18c94;

s-red-5

stroke: #ed707a;

s-red-6

stroke: #ea5560;

s-red

stroke: #e63946;

s-red-7

stroke: #c6313c;

s-red-8

stroke: #a62932;

s-red-9

stroke: #852129;

s-red-10

stroke: #65191f;

s-red-11

stroke: #451115;

s-red-12

stroke: #25090b;

s-orange-1

stroke: #ffe7df;

s-orange-2

stroke: #ffd3c2;

s-orange-3

stroke: #ffbea6;

s-orange-4

stroke: #ffa98a;

s-orange-5

stroke: #ff946e;

s-orange-6

stroke: #ff8051;

s-orange

stroke: #ff6b35;

s-orange-7

stroke: #db5c2e;

s-orange-8

stroke: #b84d26;

s-orange-9

stroke: #943e1f;

s-orange-10

stroke: #702f17;

s-orange-11

stroke: #4d2010;

s-orange-12

stroke: #291108;

s-yellow-1

stroke: #fff4db;

s-yellow-2

stroke: #ffeabb;

s-yellow-3

stroke: #ffe09b;

s-yellow-4

stroke: #ffd67b;

s-yellow-5

stroke: #ffcc5c;

s-yellow-6

stroke: #ffc23c;

s-yellow

stroke: #ffb81c;

s-yellow-7

stroke: #db9e18;

s-yellow-8

stroke: #b88414;

s-yellow-9

stroke: #946b10;

s-yellow-10

stroke: #70510c;

s-yellow-11

stroke: #4d3708;

s-yellow-12

stroke: #291d04;

s-lime-1

stroke: #ebf7da;

s-lime-2

stroke: #daf0b9;

s-lime-3

stroke: #c9e998;

s-lime-4

stroke: #b8e178;

s-lime-5

stroke: #a6da57;

s-lime-6

stroke: #95d337;

s-lime

stroke: #84cc16;

s-lime-7

stroke: #72af13;

s-lime-8

stroke: #5f9310;

s-lime-9

stroke: #4d760d;

s-lime-10

stroke: #3a5a0a;

s-lime-11

stroke: #283d07;

s-lime-12

stroke: #152104;

s-mint-1

stroke: #d9f4eb;

s-mint-2

stroke: #b7ead9;

s-mint-3

stroke: #96e0c8;

s-mint-4

stroke: #74d6b6;

s-mint-5

stroke: #53cda4;

s-mint-6

stroke: #31c393;

s-mint

stroke: #10b981;

s-mint-7

stroke: #0e9f6f;

s-mint-8

stroke: #0c855d;

s-mint-9

stroke: #096b4b;

s-mint-10

stroke: #075139;

s-mint-11

stroke: #053827;

s-mint-12

stroke: #031e15;

s-green-1

stroke: #d7f8f0;

s-green-2

stroke: #b4f3e3;

s-green-3

stroke: #91edd5;

s-green-4

stroke: #6fe7c8;

s-green-5

stroke: #4ce1bb;

s-green-6

stroke: #29dcad;

s-green

stroke: #06d6a0;

s-green-7

stroke: #05b88a;

s-green-8

stroke: #049a73;

s-green-9

stroke: #037c5d;

s-green-10

stroke: #035e46;

s-green-11

stroke: #024030;

s-green-12

stroke: #01221a;

s-cyan-1

stroke: #d7f3f8;

s-cyan-2

stroke: #b4e9f2;

s-cyan-3

stroke: #91dfec;

s-cyan-4

stroke: #6fd5e6;

s-cyan-5

stroke: #4ccae0;

s-cyan-6

stroke: #29c0da;

s-cyan

stroke: #06b6d4;

s-cyan-7

stroke: #059db6;

s-cyan-8

stroke: #048399;

s-cyan-9

stroke: #036a7b;

s-cyan-10

stroke: #03505d;

s-cyan-11

stroke: #023740;

s-cyan-12

stroke: #011d22;

s-sky-1

stroke: #dff4fe;

s-sky-2

stroke: #c3ebfd;

s-sky-3

stroke: #a7e2fc;

s-sky-4

stroke: #8cd9fb;

s-sky-5

stroke: #70cffa;

s-sky-6

stroke: #54c6f9;

s-sky

stroke: #38bdf8;

s-sky-7

stroke: #30a3d5;

s-sky-8

stroke: #2888b3;

s-sky-9

stroke: #206e90;

s-sky-10

stroke: #19536d;

s-sky-11

stroke: #11394a;

s-sky-12

stroke: #091e28;

s-blue-1

stroke: #dce6fc;

s-blue-2

stroke: #bed0f9;

s-blue-3

stroke: #9fbaf6;

s-blue-4

stroke: #81a5f3;

s-blue-5

stroke: #628ff1;

s-blue-6

stroke: #4479ee;

s-blue

stroke: #2563eb;

s-blue-7

stroke: #2055ca;

s-blue-8

stroke: #1b47a9;

s-blue-9

stroke: #153988;

s-blue-10

stroke: #102c67;

s-blue-11

stroke: #0b1e47;

s-blue-12

stroke: #061026;

s-indigo-1

stroke: #e6e7fd;

s-indigo-2

stroke: #d0d1fb;

s-indigo-3

stroke: #babcf9;

s-indigo-4

stroke: #a5a6f7;

s-indigo-5

stroke: #8f91f5;

s-indigo-6

stroke: #797bf3;

s-indigo

stroke: #6366f1;

s-indigo-7

stroke: #5558cf;

s-indigo-8

stroke: #4749ae;

s-indigo-9

stroke: #393b8c;

s-indigo-10

stroke: #2c2d6a;

s-indigo-11

stroke: #1e1f48;

s-indigo-12

stroke: #101027;

s-violet-1

stroke: #ece5fe;

s-violet-2

stroke: #dccefc;

s-violet-3

stroke: #ccb7fb;

s-violet-4

stroke: #bca0fa;

s-violet-5

stroke: #ab8af9;

s-violet-6

stroke: #9b73f7;

s-violet

stroke: #8b5cf6;

s-violet-7

stroke: #784fd4;

s-violet-8

stroke: #6442b1;

s-violet-9

stroke: #51358f;

s-violet-10

stroke: #3d286c;

s-violet-11

stroke: #2a1c4a;

s-violet-12

stroke: #160f27;

s-lavender-1

stroke: #f1ecfe;

s-lavender-2

stroke: #e5dcfe;

s-lavender-3

stroke: #d8ccfd;

s-lavender-4

stroke: #ccbcfc;

s-lavender-5

stroke: #c0abfb;

s-lavender-6

stroke: #b39bfb;

s-lavender

stroke: #a78bfa;

s-lavender-7

stroke: #9078d7;

s-lavender-8

stroke: #7864b4;

s-lavender-9

stroke: #615191;

s-lavender-10

stroke: #493d6e;

s-lavender-11

stroke: #322a4b;

s-lavender-12

stroke: #1b1628;

s-magenta-1

stroke: #f9e1fc;

s-magenta-2

stroke: #f4c8fa;

s-magenta-3

stroke: #eeaef8;

s-magenta-4

stroke: #e994f6;

s-magenta-5

stroke: #e47af3;

s-magenta-6

stroke: #de60f1;

s-magenta

stroke: #d946ef;

s-magenta-7

stroke: #bb3cce;

s-magenta-8

stroke: #9c32ac;

s-magenta-9

stroke: #7e298b;

s-magenta-10

stroke: #5f1f69;

s-magenta-11

stroke: #411548;

s-magenta-12

stroke: #230b26;

s-pink-1

stroke: #fce2ef;

s-pink-2

stroke: #f9c8e0;

s-pink-3

stroke: #f7aed2;

s-pink-4

stroke: #f495c4;

s-pink-5

stroke: #f17bb6;

s-pink-6

stroke: #ef62a7;

s-pink

stroke: #ec4899;

s-pink-7

stroke: #cb3e84;

s-pink-8

stroke: #aa346e;

s-pink-9

stroke: #892a59;

s-pink-10

stroke: #682043;

s-pink-11

stroke: #47162e;

s-pink-12

stroke: #260c18;

s-coral-1

stroke: #ffe8ed;

s-coral-2

stroke: #ffd4de;

s-coral-3

stroke: #ffc0cf;

s-coral-4

stroke: #ffabbf;

s-coral-5

stroke: #ff97b0;

s-coral-6

stroke: #ff83a0;

s-coral

stroke: #ff6f91;

s-coral-7

stroke: #db5f7d;

s-coral-8

stroke: #b85068;

s-coral-9

stroke: #944054;

s-coral-10

stroke: #703140;

s-coral-11

stroke: #4d212c;

s-coral-12

stroke: #291217;

s-zinc-1

stroke: #e3e3e5;

s-zinc-2

stroke: #cbcbce;

s-zinc-3

stroke: #b3b3b7;

s-zinc-4

stroke: #9b9ba0;

s-zinc-5

stroke: #828289;

s-zinc-6

stroke: #6a6a72;

s-zinc

stroke: #52525b;

s-zinc-7

stroke: #47474e;

s-zinc-8

stroke: #3b3b42;

s-zinc-9

stroke: #303035;

s-zinc-10

stroke: #242428;

s-zinc-11

stroke: #19191b;

s-zinc-12

stroke: #0d0d0f;

s-gray-1

stroke: #e7e8eb;

s-gray-2

stroke: #d3d5d9;

s-gray-3

stroke: #bec1c7;

s-gray-4

stroke: #a9adb5;

s-gray-5

stroke: #9499a4;

s-gray-6

stroke: #808692;

s-gray

stroke: #6b7280;

s-gray-7

stroke: #5c626e;

s-gray-8

stroke: #4d525c;

s-gray-9

stroke: #3e424a;

s-gray-10

stroke: #2f3238;

s-gray-11

stroke: #202226;

s-gray-12

stroke: #111214;

s-slate-1

stroke: #e6e9ec;

s-slate-2

stroke: #d1d5dc;

s-slate-3

stroke: #bbc2cc;

s-slate-4

stroke: #a5aebc;

s-slate-5

stroke: #8f9bab;

s-slate-6

stroke: #7a879b;

s-slate

stroke: #64748b;

s-slate-7

stroke: #566478;

s-slate-8

stroke: #485464;

s-slate-9

stroke: #3a4351;

s-slate-10

stroke: #2c333d;

s-slate-11

stroke: #1e232a;

s-slate-12

stroke: #101316;

s-silver-1

stroke: #eff0f2;

s-silver-2

stroke: #e1e3e7;

s-silver-3

stroke: #d3d7dc;

s-silver-4

stroke: #c6cad1;

s-silver-5

stroke: #b8bdc5;

s-silver-6

stroke: #aab0ba;

s-silver

stroke: #9ca3af;

s-silver-7

stroke: #868c97;

s-silver-8

stroke: #70757e;

s-silver-9

stroke: #5a5f66;

s-silver-10

stroke: #45484d;

s-silver-11

stroke: #2f3135;

s-silver-12

stroke: #191a1c;

s-black

stroke: #000000;

s-current

stroke: currentColor;

s-transparent

stroke: transparent;

s-white

stroke: #ffffff;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:s-*

Small≥640px

md:s-*

Medium≥768px

lg:s-*

Large≥1024px

xxl:s-*

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:s-*

Opacity Modifiers

Adjust color transparency by appending an opacity suffix.

Append /[opacity] to any color utility to control its transparency level.

Syntax:s-[color]/[0-100]

Stroke

Widely available

s-*251 utilities

Responsiveness

Hover State

Opacity Modifiers