TailwindreadyTailwindready
Icon Library

Perfect icons for every interface

Hand-picked SVG icons designed for modern applications. Copy the code and use them instantly in your projects.

60+ carefully crafted icons
Multiple categories available
Ready-to-copy code snippets
Alert circle
Alert triangle
Arrow down
Arrow down left
Arrow left
Arrow right
Arrow up
Arrow up left
Arrow up right
At sign
Award
Bell
Bookmark
Calendar
Camera
Check
Chevron down
Chevron left
Chevron right
Chevron up
Chevrons left
Chevrons right
Clipboard
Clock
Copy
Credit card
Crop
Download
Edit
External link
Eye
Eye off
File minus
File plus
File text
Filter
Folder
Folder minus
Folder plus
Gift
Grid
Hard drive
Hash
Heart
Help circle
Home
Image
Info
Link
List
Loader
Lock
Log out
Mail
Map pin
Maximize
Menu
Message circle
Mic
Minimize
Minus
Monitor
Move
Music
Paperclip
Pause circle
Phone
Phone call
Play circle
Plus
Power
Printer
Refresh cw
Save
Search
Server
Settings
Share
Shield
Shopping bag
Shopping cart
Smartphone
Star
Stop circle
Tablet
Tag
Trash
Unlock
Upload
User
Users
Video
Volume 1
Volume 2
Volume x
X

How to use these SVG icons with Tailwind CSS

Every icon is a plain inline SVG that uses currentColor for its stroke, so a Tailwind text color class such as text-cyan-700 recolors it, and width and height classes like size-5 resize it. Copy the HTML version for static pages, or the JSX version for React and Next.js.

Need an icon from another source in React? Paste it into the HTML and SVG to JSX converter to get camelCased attributes, and pick matching colors with the hex to Tailwind color finder.

Free tools for working with icons

Skip the manual work. These run in your browser and give you copy-paste Tailwind CSS. See all 34 tools

HTML to JSX converterTurn HTML or SVG into React-ready JSX in one paste.Color converterConvert between HEX, RGB, HSL and OKLCH with alpha support.Filter generatorBlur, brightness, sepia and more on a live preview, as Tailwind classes.Transform generatorRotate, scale, translate and skew visually, then copy the classes.

Looking for Ready-Made Tailwind CSS Components?

If you're looking for beautiful, ready-to-use Tailwind CSS components, check out our collection. These components are ready to copy-paste into your projects.

Explore Tailwind CSS Components