Free Icons for HTML / CSS — 47,000+ Icons Ready to Use

Browse and export 47,000+ icons optimized for HTML / CSS projects. Get HTML / CSS component code, raw SVG, or download as PNG/WebP. Copy-paste ready.

How to Use Icons in HTML / CSS Without Installing Packages

For plain HTML/CSS projects — no framework, no build tools, no npm — using icon fonts means adding a CDN link and learning class names. IconFontToPNG offers a simpler approach: search the icon you need, download the SVG file, and use it with an <img> tag or paste the SVG code directly into your HTML. Works in any browser, any server, any hosting.

Why Get HTML / CSS Icons Here?

  • No CDN link or font file to load — each icon is a standalone file
  • No class names to memorize — just <img src="icon.svg"> or inline SVG
  • Works with static HTML, WordPress, PHP, Jekyll, Hugo — anything
  • Better performance than icon fonts — load only the icons you use
  • Download as PNG for email templates where SVG isn't supported

HTML / CSS Icon Code Example

What you get when you copy an icon from IconFontToPNG:

<!-- Option 1: Inline SVG (best — customize color with CSS) -->
<svg width="24" height="24" fill="currentColor" viewBox="0 0 512 512">
  <path d="M502.6 278.6c12.5-12.5..."/>
</svg>

<!-- Option 2: Image tag (simplest) -->
<img src="/icons/arrow-right.svg" width="24" height="24" alt="Arrow right">

<!-- Option 3: CSS background -->
<span class="icon" style="background-image: url('/icons/arrow-right.svg')"></span>

Best Icon Libraries for HTML / CSS

For plain HTML, any icon library works via CDN (Font Awesome, Bootstrap Icons). But CDN loads the entire font file. For better performance, download individual SVG files from IconFontToPNG and include only what you need. Inline SVG gives you CSS color control. PNG works for email.

LibraryIconsHTML / CSS PackageTree-shakeable
Lucide~1,500lucide-react / lucide-vue-nextYes
Heroicons~450@heroicons/react / @heroicons/vueYes
Phosphor~7,500@phosphor-icons/react / vueYes
Font Awesome~2,000@fortawesome/react-fontawesomeYes
Bootstrap Icons~2,000react-bootstrap-iconsYes
Tabler~5,000@tabler/icons-react / vueYes
Ionicons~1,300@ionic/react (built-in)Partial
Remix Icon~2,800remixicon-reactYes

Frequently Asked Questions

How to use SVG icons in plain HTML without a framework?
Three ways: (1) Paste SVG code directly in your HTML (inline SVG). (2) Use <img src="icon.svg">. (3) Use CSS background-image. Inline SVG is most flexible — you can style it with CSS.
SVG vs icon font for HTML websites — which is better?
SVG. Icon fonts load the entire set (100KB+) even if you use 3 icons. Individual SVG files are 1-2KB each. SVG also renders more crisply and supports multicolor.
Can I use these icons in WordPress?
Yes. Download SVG or PNG files, upload to your media library, and insert in posts/pages. Or paste inline SVG in a Custom HTML block. No plugin needed.
Do SVG icons work in email?
Most email clients don't support SVG. Download icons as PNG from IconFontToPNG and use <img> tags in your email HTML.
Are these icons free for commercial HTML / CSS apps?
Yes. All 47,000+ icons come from open-source libraries (MIT, Apache 2.0, ISC, CC0, CC BY 4.0). Free for commercial use.
Do I need to install anything?
No. IconFontToPNG runs in your browser. Search, click, copy the code. No npm packages, no build config.

Related Tools

Icons for Other Frameworks