How to change svg icon colors with Tailwind CSS ? - GeeksforGeeks

26 May, 2021
SVG stands for Scalable Vector Graphics and is an XML-based ( can be edited ) vector image format. SVG is commonly used for icons, animations, interactive charts, graphs, and other dynamic graphics in the browser. As it is XML-based, you can easily edit or change the SVG icon colors with Tailwind.
Approach: You can simply customize the class of SVG by adding text-color or background-color in icons, but in this process, you have to carefully use the utilities for styling the SVG like fill and stroke in Tailwind CSS.
Syntax:
<svg class=" text-color bg-color" viewBox="0 0 24 24">
    <path d=" "/>
</svg>
Note: The viewBox attribute defines the position and dimension of an SVG viewport. The value of the viewBox attribute is a list of four numbers, min-x, min-y, width, and height. So the viewBox doesn’t set the size of the SVG, it just determines the frame or window through which we will see the SVG.
Example 1:
HTML
<!DOCTYPE html><html><head>    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"          rel="stylesheet"></head>  <body class="text-center mx-4 space-y-2">    <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>    <b>Tailwind CSS Stroke Class</b>    <div class=" m-4 grid grid-flow-col gap-4 p-5">              <!--- Home Icon --->        <svg xmlns="http://www.w3.org/2000/svg"              class="text-red-500  h-16 w-16" fill="none"              viewBox="0 0 24 24" stroke="currentColor">         <path stroke-linecap="round" stroke-linejoin="round"                stroke-width="2"                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001                  1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1                   1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1                  1 0 001 1m-6 0h6" />        </svg>              <!--- Emoji Icon --->      <svg xmlns="http://www.w3.org/2000/svg"            class="text-yellow-400  h-16 w-16" fill="none"            viewBox="0 0 24 24" stroke="currentColor">        <path stroke-linecap="round" stroke-linejoin="round"               stroke-width="2"               d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21                 12a9 9 0 11-18 0 9 9 0 0118 0z" />      </svg>  </div></body>  </html>
Output:
Example 2: Using fill and stroke utilities for styling icon.
fill-current is used to set the fill color of an SVG to the current text color. This makes it easy to set an element’s fill color by combining this class with an existing text color utility.
stroke-current is used to set the stroke color of an SVG to the current text color. This makes it easy to set an element’s stroke color by combining this class with an existing text color utility.
stroke-width is used to set the stroke width of an SVG.
Syntax:
<svg class="stroke-current stroke-current stroke-1">...</svg>
HTML
<!DOCTYPE html><html><head>    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet"></head>  <body class="text-center mx-4 space-y-2">    <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>    <b>Tailwind CSS SVG</b>    <div class=" m-4 grid grid-flow-col gap-4 p-5">              <!--- Home Icon --->        <svg xmlns="http://www.w3.org/2000/svg"              class="fill-current text-red-500  h-16 w-16"              fill="none" viewBox="0 0 24 24" stroke="currentColor">        <path stroke-linecap="round" stroke-linejoin="round"               stroke-width="2"               d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2                 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1                 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />       </svg>              <!--- Emoji Icon --->      <svg xmlns="http://www.w3.org/2000/svg"            class="stroke-current stroke-2 text-yellow-400                   h-16 w-16" fill="none"            viewBox="0 0 24 24" stroke="currentColor">      <path stroke-linecap="round" stroke-linejoin="round"            stroke-width="2"             d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15                10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />     </svg>       <svg xmlns="http://www.w3.org/2000/svg"           class="bg-red-400 text-green-300 h-16 w-16"           fill="none" viewBox="0 0 24 24" stroke="currentColor">     <path stroke-linecap="round" stroke-linejoin="round"            stroke-width="2"            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519               4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588               1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518               4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1               1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1              1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1               1 0 00.951-.69l1.519-4.674z" />    </svg>  </div></body>  </html>
Output:
Picked
Tailwind CSS-Questions
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript