Welcome to Kev’s Custom Icons
Kev’s Custom Icons is a web project that demonstrates how to create,design and animate custom icons using only HTML, CSS, and JavaScript. This site was created for learners, designers, and developers who want to understand how simple HTML elements can be styled to form dynamic and reusable icon components without using image files.
These icons are lightweight, scalable, and fully customizable. By using HTML and CSS, developers gain full control over size, color, animation, and responsiveness while maintaining fast page performance.
This site focuses on educational value, practical examples, and clean design techniques that can be applied in real-world web projects.
To get visual demonstration on how you can add functionality to your custom icons click on the link.
Why Use HTML & CSS Icons?
HTML and CSS icons eliminate the need for image downloads, resulting in faster load times and sharper visuals on all screen sizes. They also allow developers to modify icon styles instantly using CSS variables or classes.
This approach is especially useful for dashboards, admin panels, learning projects, and lightweight interfaces where performance and flexibility are important.
How to Use These Icons
Each icon can be recreated by copying the relevant HTML structure and CSS rules into your own project. You can resize icons, change colors, or add animations by editing standard CSS properties.
These icons are suitable for learning purposes, UI prototyping, and simple production use where minimal assets are preferred.
Every icon on this page is handcrafted.Scroll down to explore live examples and learn how to create each one from scratch.
How To Create The Icons
↣To create a play button icon like the one shown,use a button element with this css style properties (button{background-color: black; color:white; border:2px solid lime; font-weight: bolder; border-radius:50%;}) and the text (▹) for the button element.
↣To create a pause button icon like the one shown,use a button and a span element with this css style properties (button{position:relative; background-color: black; color:white; border:2px solid lime; width:25px; height:25px; border-radius:50%;}; span{font-size:60%; position:absolute; top:25%; bottom:25%; right:3px; left:3px;}) and the text (∣∣) for the span element.The button element is a parent to the span element.
↣To create a refresh button icon like the one shown,use a button and a span element with this css style properties (button{position:relative; background-color: black; color:white; border:2px solid lime; font-weight: bolder; border-radius:50%; width:25px; height:25px;}; span{ position:absolute; bottom:3px; right:3px; left:3px; }) and the text (↺) for the span element.The button is a parent to the span element.
↣To create a stop button icon like the one shown,use a button and a span element with this css style properties (button{background-color: black; color:white; border:2px solid lime; font-weight: bolder; border-radius:50%; width:25px; height:25px;}; span{font-size:15px; color:red;}) and the text (▪) for the span element.The button is a parent to the span element.
↣To create a forward button icon like the one shown,use a button element with this css style properties (button{background-color: black; color:white; border:2px solid lime; font-weight: bolder; width:30px; height:30px; border-radius:25%;}) and the text (⊳⊳) for the button element.
↣To create a rewind button icon like the one shown,use a button element with this css style properties (button{background-color: black; color:white; border:2px solid lime; font-weight: bolder; width:30px; height:30px; border-radius:25%; }) and the text (⊲⊲) for the button element.