Collection of hand-picked free HTML and CSS icon and icon set examples from Codepen and other resources.

Related Articles

  1. CSS Dotted Menu Icons
  2. CSS Hamburger Menu Icons
  3. CSS Social Media Icons
  4. CSS Weather Icons

Table of Contents

  1. Icon Sets
  2. Icons

Icon Sets

Demo image: Tabler Icons

Author

  • Tabler

About a code

Tabler Icons

Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.

Demo image: css.gg

Author

  • Astrit Malsija

About a code

css.gg

700+ CSS icons. Open-source CSS, SVG and Figma UI icons available in SVG sprite, styled-components, NPM & API.

Demo image: Unicons

Author

  • Iconscout

About a code

Unicons

1000+ pixel-perfect vector icons and iconfont for your next project.

Demo image: icons.css

Author

  • Yan Zhu

About a code

icons.css

Single element pure CSS icons. Elegantly developed pure CSS icons. Font size based single element icons. Production ready icons for your projects.

Demo image: Font Awesome

Author

  • Fort Awesome

About a code

Font Awesome

The iconic SVG, font, and CSS toolkit.

Demo image: iConicss

Author

  • Jean-Marc Viglino

About a code

iConicss

More than 900 pure CSS3 icons. Each icon uses a single anchor element (one div) and just one color: the currentColor (and transparent) except for the colored icons (as the name suggests). Thus they can easily be included in a page with a single HTML element and use the current color and current font size.

Demo image: Gov Icons

Author

  • 540

About a code

Gov Icons

Free, open-sourced icon font and CSS toolkit with 136 government themed icons, for easy scalable vector graphics.

Demo image: Flat Flags

Author

  • WobbleCode

About a code

Flat Flags

A set of flags for CSS and Less.

Demo image: CSSicon

Author

  • Wenting Zhang

About a code

CSSicon

Icon set made with pure CSS code, no dependencies, "grab and go" icons.

Demo image: Fileicon.css

Author

  • Yan Zhu

About a code

Fileicon.css

The customizable pure CSS file icons.

Demo image: Material Design Iconic Font

Author

  • Sergey Kupletsky

About a code

Material Design Iconic Font

Material Design Iconic Font is a full suite of material design icons (created and maintained by Google) with additional community-designed and brands icons for easy scalable vector graphics on websites or desktop.

Demo image: Simple Line Icons

Author

  • Sabbir Ahmed

About a code

Simple Line Icons

Simple line icons with CSS, Sass, Less & Web-fonts files.

Demo image: icono

Author

  • Saeed Alipoor

About a code

icono

Icono is an icon pack that needs no external resources. Every tags can be an icon made with pure CSS.

Demo image: Stackicons

Author

  • Parker Bennett

About a code

Stackicons

Icon font and Sass-based construction kit for Stackicons-Social, which supports multiple button shapes and a unique "multi-color" option in CSS for over 60 social brands.

Icons

Author

  • Roden

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

6 CSS Icons Pack

Animated pure CSS icons pack.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Emoji Icons

Author

  • Mark Mead

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Emoji Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Glassmorphism Icon

Author

  • Vihanga nivarthana

Made with

  • HTML / CSS (SCSS)

About a code

Glassmorphism Icon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: MS Office Icons Using SCSS

Author

  • Menashe Bouhadana

Made with

  • HTML / CSS (SCSS)

About a code

MS Office Icons Using SCSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Shunya Koide

Made with

  • HTML / CSS (SCSS)

About a code

CSS Hover Trash Can

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Tsukasa Aoki

Made with

  • HTML / CSS (SCSS)

About a code

Scroll Down Icon Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • FlorinCornea

Made with

  • HTML / CSS

About a code

Dashed Border Icon Animations

Simple and clean icon animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About a code

Search to Close

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Amir Rahimi

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Music Icon Animated

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ahmad Emran

Made with

  • HTML / CSS

About a code

Animation Font Awesome Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Darin

Made with

  • HTML / CSS (SCSS)

About a code

Stopwatch Icon with CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sikriti Dakua

Made with

  • HTML / CSS

About a code

Hover Icons [Mac OS - min, max, close]

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Julia Chistiakova

Made with

  • HTML / CSS (SCSS)

About a code

Animated Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -