Welcome to our collection of hand-picked free HTML and CSS icon code examples. These examples have been carefully selected from a variety of sources including CodePen, GitHub, and other resources. This collection has been updated as of August 2023 with 29 new items.

CSS icons are graphical elements designed using HTML and CSS. They are used to represent actions, content, or applications on the website. They can range from simple shapes like circles and squares to more complex designs like logos or detailed illustrations.

CSS icons can enhance the user interface of your website by providing visual cues for navigation and interaction. They can be particularly effective in scenarios where you want to guide users through your site, highlight important features, or create a visually appealing design.

Our collection features a wide range of CSS icons, each with its own unique design and functionality. Whether you’re looking for a simple geometric icon or a complex illustrative icon, you’re sure to find something that suits your needs.

We hope you find this collection useful and inspiring for your web development journey. Happy designing!

Related Articles

  1. CSS Dotted Menu Icons
  2. CSS Hamburger Menu Icons
  3. CSS Social Media Icons
  4. CSS Weather Icons
Demo image: 3D Camera Icons

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

3D Camera Icons

Pure CSS camera icons that rotate with a plethora of effects. Inspired by Camera 3D icon by Gleb Kuznetsov on Dribbble. A bit glitchy in Safari.

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

Responsive: no

Dependencies: -

Demo image: Glass Icon

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Glass Icon

A skeuomorphic icon design based on this Dribbble shot by Sandor.

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

Responsive: no

Dependencies: -

Demo image: Noisy Grainy Icons

Author

  • Chris Smith

Made with

  • HTML / CSS

About a code

Noisy Grainy Icons

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

Responsive: no

Dependencies: font-awesome.css

Demo image: Pure CSS Temperature Icon

Author

  • Josetxu

Made with

  • HTML / CSS

About a code

Pure CSS Temperature Icon

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

Responsive: yes

Dependencies: -

Author

  • Vincent Durand

Made with

  • HTML / CSS (SCSS)

About a code

3D Glass Weather Icons

3D glass weather icons inspired by George Finnbogason 's Dribble.

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

Responsive: yes

Dependencies: -

Author

  • Taylon, Chan

Made with

  • HTML / CSS (SCSS)

About a code

Glassmorphism Icon Buttons

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

Responsive: no

Dependencies: -

Demo image: Single Div CSS Set of Streaming Icons

Author

  • Lynn Fisher

Made with

  • HTML / CSS (Stylus)

About a code

Single Div CSS Set of Streaming Icons

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

Responsive: no

Dependencies: -

Author

  • Krishna Gupta

Made with

  • HTML / CSS

About a code

CSS Glowing Icons

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

Responsive: no

Dependencies: font-awesome.css

Demo image: Futuristic Adobe Acrobat Reader Icon

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Futuristic Adobe Acrobat Reader Icon

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

Responsive: yes

Dependencies: -

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: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

Printer

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: -

Demo image: App Icon - Notability

Author

  • nicolazj

Made with

  • HTML / CSS (SCSS)

About a code

App Icon - Notability

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

Responsive: no

Dependencies: -

Demo image: App Icon - PicLab

Author

  • nicolazj

Made with

  • HTML / CSS (SCSS)

About a code

App Icon - PicLab

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

Responsive: no

Dependencies: -