Style SVG Icons with Tailwind Utility Classes

Share this video with your friends

Send Tweet

In this lesson, we'll be replacing the text-based rating in our card to use SVG icons to signal how the property is rated.

To do this, we'll start with a custom, raw SVG icon that was exported from sketch (best to export as a square SVG for easier styling). One thing to note is that this file is much bigger than you need it to be when it's exported. To clean it up, you can run it through a service like SVGOMG that will reduce the file size drastically. After this, we'll remove the SVG color and sizing and use Tailwind utility classes to style these icons how we'd like them, with h- / w- utilities for size and fill-current for color.

Lastly, the positioning of the icons will be adjusted with Tailwind's flexbox utility classes.

David Free
David Free
~ 4 years ago

I can't seem to find zondicons or entypo on the tailwindcss site? Has this been changed?

Lucas Minter
Lucas Minter
~ 4 years ago

Hey David! Tailwind links to the Zondicons and the Entypo websites. I linked those for you.

David Free
David Free
~ 4 years ago

cheers