Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to style icon color, size, and shadow by using CSS
Icons are an essential part of any website or application, as they provide users a quick and easy way to understand and interact with content. Using CSS, we can style icon color, size, and shadow to create a unique and visually appealing user experience instead of relying on default styling.
In this article, we will learn different methods to style icons using CSS properties to customize their appearance.
Syntax
/* For Font Icons */
.icon {
color: value;
font-size: value;
text-shadow: horizontal vertical blur color;
}
/* For SVG Icons */
svg {
fill: color;
width: value;
height: value;
filter: drop-shadow(horizontal vertical blur color);
}
/* For CSS Icons */
.css-icon {
background-color: color;
width: value;
height: value;
box-shadow: horizontal vertical blur color;
}
Method 1: Using Font Awesome Icons
Font Awesome provides a library of scalable vector icons that are easily customizable using CSS. First, include the Font Awesome stylesheet in your HTML document
Include Font Awesome CDN link in the <head> section:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Example
The following example demonstrates styling Font Awesome icons with different colors, sizes, and text shadows
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons Styling</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.container {
display: flex;
gap: 30px;
padding: 20px;
}
.icon-html {
color: #e34f26;
font-size: 4em;
text-shadow: 3px 3px 5px orange;
}
.icon-css {
color: #1572b6;
font-size: 4em;
text-shadow: 3px 3px 5px skyblue;
}
.icon-github {
color: #333;
font-size: 4em;
text-shadow: 3px 3px 5px gray;
}
</style>
</head>
<body>
<h2>Styling Font Awesome Icons</h2>
<div class="container">
<i class="fa fa-html5 icon-html" aria-hidden="true"></i>
<i class="fa fa-css3 icon-css" aria-hidden="true"></i>
<i class="fa fa-github icon-github" aria-hidden="true"></i>
</div>
</body>
</html>
Three large icons appear side by side: an orange HTML5 icon with orange shadow, a blue CSS3 icon with light blue shadow, and a black GitHub icon with gray shadow.
Method 2: Using CSS Icons
CSS icons are created using pure CSS properties like border-radius, box-shadow, and positioning. They are lightweight and fully customizable.
Example
The following example creates custom CSS icons with different shapes, colors, and shadows
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons Styling</title>
<style>
.container {
display: flex;
gap: 20px;
padding: 20px;
align-items: center;
}
.square-icon {
position: relative;
width: 60px;
height: 60px;
background-color: #ff6b6b;
box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}
.square-icon:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 40px;
height: 40px;
background-color: #ff3333;
}
.circle-icon {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #4ecdc4;
box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}
.circle-icon:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #26a69a;
}
.triangle-icon {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid #ffeb3b;
box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<h2>CSS Icons with Custom Styling</h2>
<div class="container">
<div class="square-icon"></div>
<div class="circle-icon"></div>
<div class="triangle-icon"></div>
</div>
</body>
</html>
Three custom icons appear: a red layered square, a teal layered circle, and a yellow triangle, all with shadow effects.
Method 3: Using SVG Icons
SVG icons are vector-based graphics that scale perfectly at any size. They can be styled using CSS properties like fill, width, height, and filter.
Example
The following example demonstrates styling SVG icons with color, size, and drop shadow effects
<!DOCTYPE html>
<html>
<head>
<title>SVG Icon Styling</title>
<style>
.icon-container {
display: flex;
gap: 30px;
padding: 20px;
align-items: center;
}
.search-icon {
fill: #2196f3;
width: 60px;
height: 60px;
filter: drop-shadow(3px 3px 6px rgba(33, 150, 243, 0.4));
}
.heart-icon {
fill: #e91e63;
width: 60px;
height: 60px;
filter: drop-shadow(3px 3px 6px rgba(233, 30, 99, 0.4));
}
.star-icon {
fill: #ffc107;
width: 60px;
height: 60px;
filter: drop-shadow(3px 3px 6px rgba(255, 193, 7, 0.4));
}
</style>
</head>
<body>
<h2>SVG Icons with Custom Styling</h2>
<div class="icon-container">
<svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
<svg class="heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12,21.35l-1.45-1.32C5.4,15.36,2,12.28,2,8.5 2,5.42,4.42,3,7.5,3c1.74,0,3.41,0.81,4.5,2.09C13.09,3.81,14.76,3,16.5,3 C19.58,3,22,5.42,22,8.5c0,3.78-3.4,6.86-8.55,11.54L12,21.35z"/>
</svg>
<svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z"/>
</svg>
</div>
</body>
</html>
Three SVG icons appear with custom styling: a blue search icon with blue shadow, a pink heart icon with pink shadow, and a yellow star icon with yellow shadow.
Conclusion
Styling icons with CSS provides excellent flexibility to match your website's design. Whether using Font Awesome, pure CSS, or SVG icons, you can easily customize color, size, and shadow effects to create visually appealing interfaces that enhance user experience.
3K+ Views
