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
Set the size of the icons in HTML
In this article, we are going to discuss how to set the size of the icons in HTML. Icons are essential visual elements that enhance user experience by providing intuitive symbols for actions, navigation, and content representation.
An icon is a symbol that represents a specific action on a webpage. The Icon Fonts contain symbols and glyphs that can be easily styled with CSS just like regular text. There are several icon libraries (fonts) that provide icons and can be used on HTML webpages.
The prominent icon fonts frequently used by web developers are Font Awesome, Bootstrap Glyphicons, and Google Material Icons.
-
Font Awesome − This library provides thousands of scalable vector icons that can be easily customized with CSS. It offers both free and premium versions, with the free version containing over 1,500 icons.
-
Bootstrap Glyphicons − This is a library of monochromatic icons available in raster image formats, vector image formats, and as fonts. It provides over 250 glyphs in font format and was included with Bootstrap 3.
-
Google Material Icons − There are over 1,000 icons designed under Google's "material design guidelines". These icons are supported in almost every web browser and are completely free to use.
Methods for Setting Icon Sizes
There are several ways to control the size of icons in HTML −
-
CSS font-size property − Since icons are treated as fonts, you can use the
font-sizeproperty to control their size. -
CSS width and height properties − For SVG icons or icon images, you can use width and height properties.
-
Predefined size classes − Many icon libraries provide predefined size classes like
fa-lg,fa-2x,fa-3xin Font Awesome.
Font Awesome Icons
Using CSS font-size Property
The most common method to resize Font Awesome icons is using the CSS font-size property −
<!DOCTYPE html>
<html>
<head>
<title>Set the size of Font Awesome icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.icon-small { font-size: 20px; color: #007bff; }
.icon-medium { font-size: 50px; color: #28a745; }
.icon-large { font-size: 100px; color: #dc3545; }
</style>
</head>
<body>
<h2>Font Awesome Icons with Different Sizes</h2>
<p>Small icon (20px): <i class="fas fa-home icon-small"></i></p>
<p>Medium icon (50px): <i class="fas fa-heart icon-medium"></i></p>
<p>Large icon (100px): <i class="fas fa-star icon-large"></i></p>
</body>
</html>
The output shows three icons in different sizes with different colors −
Font Awesome Icons with Different Sizes Small icon (20px): ? (blue, 20px) Medium icon (50px): ? (green, 50px) Large icon (100px): ? (red, 100px)
Using Font Awesome Size Classes
Font Awesome provides predefined size classes for convenience −
<!DOCTYPE html> <html> <head> <title>Font Awesome Predefined Sizes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body style="font-family: Arial, sans-serif; padding: 20px; line-height: 2;"> <h2>Font Awesome Predefined Size Classes</h2> <p>Normal: <i class="fas fa-user"></i></p> <p>Large: <i class="fas fa-user fa-lg"></i></p> <p>2x: <i class="fas fa-user fa-2x"></i></p> <p>3x: <i class="fas fa-user fa-3x"></i></p> </body> </html>
The predefined classes provide consistent scaling across different icon sizes.
Google Material Icons
Example
Google Material Icons can be resized using CSS in the same way as Font Awesome icons −
<!DOCTYPE html>
<html>
<head>
<title>Set the size of Google Material Icons</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.material-icons.small { font-size: 24px; }
.material-icons.medium { font-size: 48px; }
.material-icons.large { font-size: 72px; }
</style>
</head>
<body>
<h2>Google Material Icons with Different Sizes</h2>
<p>Small (24px): <span class="material-icons small">home</span></p>
<p>Medium (48px): <span class="material-icons medium">favorite</span></p>
<p>Large (72px): <span class="material-icons large">settings</span></p>
</body>
</html>
The output displays Material Icons in three different sizes, demonstrating how the font-size property controls their appearance.
Bootstrap Icons (Modern Alternative to Glyphicons)
Example
Bootstrap 4+ replaced Glyphicons with Bootstrap Icons. Here's how to use and resize them −
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons Sizing</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.bi-small { font-size: 1rem; }
.bi-medium { font-size: 2rem; }
.bi-large { font-size: 4rem; }
</style>
</head>
<body>
<h2>Bootstrap Icons with Different Sizes</h2>
<p>Small (1rem): <i class="bi bi-house-fill bi-small"></i></p>
<p>Medium (2rem): <i class="bi bi-heart-fill bi-medium"></i></p>
<p>Large (4rem): <i class="bi bi-star-fill bi-large"></i></p>
</body>
</html>
Bootstrap Icons use the same font-based approach, making them easily scalable with CSS.
Size Comparison Table
Following table compares different sizing methods for icon fonts −
| Method | CSS Property | Example | Best Use Case |
|---|---|---|---|
| Pixel Values | font-size: 24px; |
.icon { font-size: 24px; } |
Precise control over icon size |
| Relative Units (em) | font-size: 1.5em; |
.icon { font-size: 1.5em; } |
Icons that scale with parent text |
| Relative Units (rem) | font-size: 2rem; |
.icon { font-size: 2rem; } |
Consistent sizing across components |
| Predefined Classes | Library-specific |
fa-2x, fa-lg
|
Quick sizing without custom CSS |
Best Practices for Icon Sizing
-
Use relative units (em, rem) for responsive designs that adapt to different screen sizes.
-
Maintain consistency by defining a set of standard icon sizes across your project.
-
Consider accessibility by ensuring icons are large enough to be easily clickable (minimum 44x44px for touch targets).
-
Test on different devices to ensure icons remain legible and appropriately sized across various screen sizes.
Conclusion
Setting icon sizes in HTML is straightforward using CSS properties like font-size for icon fonts. Different icon libraries offer various sizing methods, from custom CSS to predefined classes. Choose the method that best fits your design requirements and maintains consistency across your project.
7K+ Views
