Icons

@sgroup/tailwind-plugins/icons

Icons should always be SVGs (no icon fonts here!), and by default, they take up 100% of the width and height of the containing element. This allows you to control to size of the svg without having to directly modify the SVG file.

Icons

<div class="icon w-20 h-20">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M509.8 227.5L448 177.8v-76c0-3.3-2.7-6-6-6h-20c-3.3 0-6 2.7-6 6v50.1L276.1 39.1c-11.7-9.5-28.5-9.5-40.2 0L2.2 227.5c-2.6 2.1-3 5.9-.9 8.4l12.6 15.6c2.1 2.6 5.9 3 8.5.9L64 218.9v229c0 17.7 14.3 32 32 32h116c6.6 0 12-5.4 12-12V335.8l64 .3v132.2c0 6.6 5.4 12 12 12l116-.3c17.7 0 32-14.3 32-32V219l41.6 33.5c2.6 2.1 6.4 1.7 8.5-.9l12.6-15.6c2.1-2.6 1.6-6.4-.9-8.5zM416 448l-96 .3V316c0-6.6-5.4-12-12-12l-104-.3c-6.6 0-12 5.4-12 12V448H96V193.1l156.2-126c2.2-1.8 5.3-1.8 7.5 0l156.2 126V448z"/></svg>
</div>

<div class="icon w-10 h-10">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M509.8 227.5L448 177.8v-76c0-3.3-2.7-6-6-6h-20c-3.3 0-6 2.7-6 6v50.1L276.1 39.1c-11.7-9.5-28.5-9.5-40.2 0L2.2 227.5c-2.6 2.1-3 5.9-.9 8.4l12.6 15.6c2.1 2.6 5.9 3 8.5.9L64 218.9v229c0 17.7 14.3 32 32 32h116c6.6 0 12-5.4 12-12V335.8l64 .3v132.2c0 6.6 5.4 12 12 12l116-.3c17.7 0 32-14.3 32-32V219l41.6 33.5c2.6 2.1 6.4 1.7 8.5-.9l12.6-15.6c2.1-2.6 1.6-6.4-.9-8.5zM416 448l-96 .3V316c0-6.6-5.4-12-12-12l-104-.3c-6.6 0-12 5.4-12 12V448H96V193.1l156.2-126c2.2-1.8 5.3-1.8 7.5 0l156.2 126V448z"/></svg>
</div>

You can also modify the colour of the SVGs path, by setting the colour on the containing element. SVG's will be forced to use fill: currentColor;.

Colour

<div class="icon w-20 h-20 text-red-500">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M509.8 227.5L448 177.8v-76c0-3.3-2.7-6-6-6h-20c-3.3 0-6 2.7-6 6v50.1L276.1 39.1c-11.7-9.5-28.5-9.5-40.2 0L2.2 227.5c-2.6 2.1-3 5.9-.9 8.4l12.6 15.6c2.1 2.6 5.9 3 8.5.9L64 218.9v229c0 17.7 14.3 32 32 32h116c6.6 0 12-5.4 12-12V335.8l64 .3v132.2c0 6.6 5.4 12 12 12l116-.3c17.7 0 32-14.3 32-32V219l41.6 33.5c2.6 2.1 6.4 1.7 8.5-.9l12.6-15.6c2.1-2.6 1.6-6.4-.9-8.5zM416 448l-96 .3V316c0-6.6-5.4-12-12-12l-104-.3c-6.6 0-12 5.4-12 12V448H96V193.1l156.2-126c2.2-1.8 5.3-1.8 7.5 0l156.2 126V448z"/></svg>
</div>

With buttons

<a class="btn btn-primary inline-flex items-center" href="#" role="button">
    <div class="icon mr-2 h-4 w-4">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 352c-16.53 0-33.06-5.422-47.16-16.41L0 173.2V400C0 426.5 21.49 448 48 448h416c26.51 0 48-21.49 48-48V173.2l-208.8 162.5C289.1 346.6 272.5 352 256 352zM16.29 145.3l212.2 165.1c16.19 12.6 38.87 12.6 55.06 0l212.2-165.1C505.1 137.3 512 125 512 112C512 85.49 490.5 64 464 64h-416C21.49 64 0 85.49 0 112C0 125 6.01 137.3 16.29 145.3z"></path></svg>
    </div>
    Button
</a>

<a class="btn btn-primary inline-flex items-center" href="#" role="button">
    Button
    <div class="icon ml-2 h-3 w-3">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"></path></svg>
    </div>
</a>

You can also disable this behaviour using .no-fill. This is most useful for multi-coloured SVGs that you wouldn't want to inherit the colour from the parent.

Preserve colours

<div class="icon w-20 h-20 text-red-500">
    <svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient gradientUnits="userSpaceOnUse" id="linear-gradient" x1="256" x2="256" y1="99.15" y2="424.78"><stop offset="0" stop-color="#47a2f5"/><stop offset="1" stop-color="#2b6fdc"/></linearGradient></defs><title/><rect fill="url(#linear-gradient)" height="412.22" rx="55.43" width="412.22" x="49.89" y="49.89"/><path d="M217.92,266.2H171v53.15h47V462.11h62.43V320.43H327l9.69-54.23h-56V226.57A33.57,33.57,0,0,1,314.33,193H341V143.49H283.11a64.93,64.93,0,0,0-64.93,64.64Z" fill="#fefefe"/></svg>
</div>

<div class="icon no-fill w-20 h-20 text-red-500">
    <svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient gradientUnits="userSpaceOnUse" id="linear-gradient" x1="256" x2="256" y1="99.15" y2="424.78"><stop offset="0" stop-color="#47a2f5"/><stop offset="1" stop-color="#2b6fdc"/></linearGradient></defs><title/><rect fill="url(#linear-gradient)" height="412.22" rx="55.43" width="412.22" x="49.89" y="49.89"/><path d="M217.92,266.2H171v53.15h47V462.11h62.43V320.43H327l9.69-54.23h-56V226.57A33.57,33.57,0,0,1,314.33,193H341V143.49H283.11a64.93,64.93,0,0,0-64.93,64.64Z" fill="#fefefe"/></svg>
</div>

Horizontal Rule

Images