Hand-Picked HTML and CSS Icon and Icon Set Code Examples

Browse a curated collection of HTML and CSS icon and icon set code examples from Codepen and other resources to enhance your website with stylish and interactive icons.

3D Camera Icons

3D Camera Icons

Author:
Jon Kantner | March 23, 2023
Made with:
HTML / CSS

About a code

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

Glass Icon

Author:
Jon Kantner | March 10, 2023
Made with:
HTML / CSS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Noisy Grainy Icons

Noisy Grainy Icons

Author:
Chris Smith | November 26, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css
Pure CSS Temperature Icon

Pure CSS Temperature Icon

Author:
Josetxu | June 20, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

3D Glass Weather Icons

Author:
Vincent Durand | May 6, 2022
Made with:
HTML / CSS (SCSS)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Glassmorphism Icon Buttons

Author:
Taylon, Chan | April 23, 2022
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Single Div CSS Set of Streaming Icons

Single Div CSS Set of Streaming Icons

Author:
Lynn Fisher | October 2, 2021
Made with:
HTML / CSS (Stylus)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

CSS Glowing Icons

Author:
Krishna Gupta | October 2, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css
Futuristic Adobe Acrobat Reader Icon

Futuristic Adobe Acrobat Reader Icon

Author:
Jon Kantner | September 2, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

6 CSS Icons Pack

Author:
Roden | March 31, 2021
Made with:
HTML (Pug) / CSS (SCSS)

About a code

Animated pure CSS icons pack.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Printer

Author:
Aaron Iker | March 4, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Emoji Icons

Emoji Icons

Author:
Mark Mead | January 5, 2021
Made with:
HTML (Haml) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Glassmorphism Icon

Glassmorphism Icon

Author:
Vihanga nivarthana | April 21, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
MS Office Icons Using SCSS

MS Office Icons Using SCSS

Author:
Menashe Bouhadana | December 31, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

CSS Hover Trash Can

Author:
Shunya Koide | October 26, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Scroll Down Icon Animation

Author:
Tsukasa Aoki | May 11, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Dashed Border Icon Animations

Author:
FlorinCornea | March 3, 2020
Made with:
HTML / CSS

About a code

Simple and clean icon animations.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Search to Close

Author:
Mikael Ainalem | February 4, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Music Icon Animated

Author:
Amir Rahimi | July 21, 2019
Made with:
HTML (Haml) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Animation Font Awesome Icons

Author:
Ahmad Emran | June 23, 2019
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css

Stopwatch Icon with CSS Animation

Author:
Darin | May 22, 2019
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

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

Author:
Sikriti Dakua | March 19, 2019
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Animated Icons

Author:
Julia Chistiakova | March 30, 2018
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
App Icon - Notability

App Icon - Notability

Author:
nicolazj | February 9, 2015
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
App Icon - PicLab

App Icon - PicLab

Author:
nicolazj | February 6, 2015
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨