Create Icons with CSS

Dealing with icon images on the web is crucial as it affects performance of the application/website. It is also difficult to modify it and it also loads slowly. But with the help of CSS icons we can use the small size of icons and we can use it as text. It is very useful for Menu Icons.

With the help of CSS we can create different shapes of icons, and if working with text you can change the height, width and color as per your designs using CSS. These icons are useful in Mobile Devices.

It’s so much easier to maintain as compared to an image. Want to change the width? Just modify the pixel value; no Photoshop required here! Want to change the color? Easy!

Creating following Four icons using CSS

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support

Hamburger Icon

HTML

<i class="icon"></i>
<i class="icon icon_hamburger"></i>

CSS

.icon{
position: relative;
display:inline-block;
}

.icon::before,
.icon::after{
content: "";
position: absolute;
}

.icon_hamburger{
width:1.63em;
height:.345em;
background:black;
}

i{
display: block;
}

.icon_hamburger::before,
.icon_hamburger::after{
width:1.63em;
height:.345em;
background:black;
}

.icon_hamburger::before{
top:-.625em;
}

.icon_hamburger::after{
bottom:-.625em;
}

Mail Icon

<i class="icon"></i>
<i class="icon icon_mail"></i>
.icon_mail{
border-top: 1.063em solid transparent;
border-right: 1.25em solid black;
border-bottom: .5em solid black;
border-left: 1.25em solid black;
top: 0.6em;
}	

.icon_mail:before{
border-top: 1.063em solid #000;
border-right: 1.25em solid transparent;
border-left: 1.25em solid transparent;
left: -1.25em;
top: -1.2em;
}

That’s it! It’s so much easier than an image to maintain, too. Want to change the width? Just modify the pixel value; no Photoshop required! Want to change the color? Easy!

Heart Icon

<i class="icon"></i>
<i class="icon heart_icon"></i>
.heart_icon:before,
.heart_icon:after{
width: 1em;
height:1.563em;
background:#000;
top: -17px;
}

.heart_icon:before{
transform: rotate(135deg);
border-radius:0 0.5em 0.5em;
}

.heart_icon:after{
left:.375em;
transform: rotate(45deg);
border-radius:0.5em 0.5em 0;
}

Home Icon

<i class="icon"></i>
<i class="icon home_icon"></i>
.home_icon{
border-bottom: 1.063em solid #000;
border-right: 1.25em solid transparent;
border-left: 1.25em solid transparent;
left:30px;
}

.home_icon::before,
.home_icon::after{
width:.563em;
height:.625em;
background:#000;
}

.home_icon::before {
margin: .938em 0 0 -.688em;
}

.home_icon::after {
margin: .938em 0 0 .125em;
}