Heritage collection
Free SVG icons.
Free icon packs were one of the most-linked corners of the original CSS Crème. Here's the
modern take: a clean, consistent set of inline SVG line icons. Click any icon to copy its markup. They
inherit color from currentColor and scale with width, so styling is pure CSS.
Marketplaces sell this category by the file, typically about a dollar each or a monthly subscription for the library. These line icons and our own packs are free, drawn by us, and yours to use in commercial work with no attribution and no account. There is no upgrade tier behind it. The open-source emoji sets further down are other makers' work, free under their own licences, and each page says what that licence asks.
Tip: click an icon to copy its SVG.
Holiday icons
All holidays →Each holiday drawn by several open sets, in 3D, colour and line, free for commercial use with no credit needed.
Emoji icon packs
See all packs →Hand-drawn reaction and sticker packs — transparent PNG and WebP, free for personal and commercial use.
Open-source emoji sets
Compare the sets →Every full emoji set whose maker publishes it for anyone to reuse: Microsoft Fluent, Twemoji, OpenMoji, Google Noto and Blobmoji. Not our drawings, so each pack states its licence and the credit it asks for.
Fluent Emoji Flat 
Fluent Emoji Color 
Fluent Emoji 3D 
Fluent Emoji High Contrast 
Twemoji 
OpenMoji Color 
OpenMoji Black 
Noto Emoji 
Blobmoji 
EmojiOne 2 
EmojiOne 2 Monotone 
EmojiTwo 
EmojiTwo Monotone 
Emoji One (2015) 
Noto Emoji 2017 (Blob) 
Blobmoji2 
SerenityOS Emoji 
Firefox Emoji 
Fluent Emoji Animated 
Animated Noto Emoji How to use these icons
Inline SVG is the most flexible way to ship icons. Because the markup lives in your HTML, it loads with
the page (no extra request), and every stroke responds to CSS. Set stroke="currentColor" and
the icon takes the text color of its container; hover states and dark mode come free.
Size with width and height, adjust weight with stroke-width, and
animate with transition like any other element. Need a recolor on hover? Wrap the icon in a
link and let currentColor do the work:
a { color: #6c5d4e; }
a:hover { color: #4F46E5; } /* the icon follows */Building a UI around them? Start from a template and reach for the CSS tools when you need gradients or depth.