How to resize SVG icon using Tailwind CSS ?

17 Jun, 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 resize the SVG icon using Tailwind.
Approach: You can simply customize the class of SVG by changing the height and width of the icons or by changing the values of viewBox attributes of SVG.
Syntax: 
<svg class="h-30 w-30" 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: Using viewBox attribute to resize SVG icon.
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 Resize SVG icon</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" fill="none" viewBox="0 0 80 80"            stroke="currentColor" height="100px" width="100px">            <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" fill="none" viewBox="0 0 80 80"            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: Simply changing the width and height of the class of an icon.
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=" text-red-500 h-70 w-50" viewBox="0 0 80 80"             fill="none" 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>          <svg xmlns="http://www.w3.org/2000/svg"             class="bg-red-400 text-green-300 h-40 w-20 fill-current"            viewBox="0 0 80 80" fill="none" 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.