Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to add icons in the button in HTML?

HTML CSS Web Development Front End Technology

Icons in HTML buttons help improve user experience by providing visual cues about the button's function. This guide covers two popular methods for adding icons to buttons using modern approaches.

Syntax

/* Method 1: Font Icons */
button {
    font-family: icon-font;
}

/* Method 2: Background Images */
button {
    background-image: url(icon.png);
    background-repeat: no-repeat;
    background-position: center;
}

Method 1: Using Font Icon Libraries

Font libraries like Font Awesome provide scalable vector icons that can be easily styled with CSS. Here's how to implement them

Example

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .btn {
            padding: 12px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            margin: 10px;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .btn i {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <button class="btn">
        <i class="fas fa-download"></i> Download
    </button>
    <button class="btn">
        <i class="fas fa-heart"></i> Like
    </button>
    <button class="btn">
        <i class="fas fa-share"></i> Share
    </button>
</body>
</html>

Three blue buttons appear with icons: "Download" with a download icon, "Like" with a heart icon, and "Share" with a share icon. The buttons have hover effects that darken the background.

Method 2: Using CSS Background Images

This method uses image files as button backgrounds, giving you complete control over custom icons

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        .icon-btn {
            width: 120px;
            height: 40px;
            border: 2px solid #333;
            border-radius: 5px;
            background-color: #f8f9fa;
            background-repeat: no-repeat;
            background-position: 10px center;
            background-size: 20px 20px;
            padding-left: 40px;
            cursor: pointer;
            margin: 10px;
            font-weight: bold;
        }
        .search-btn {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>');
        }
        .user-btn {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>');
        }
    </style>
</head>
<body>
    <button class="icon-btn search-btn">Search</button>
    <button class="icon-btn user-btn">Profile</button>
</body>
</html>

Two buttons with custom SVG icons appear: "Search" with a magnifying glass icon and "Profile" with a user icon. The icons are positioned on the left side of each button.

Method 3: Using Inline SVG Icons

For maximum customization and scalability, you can embed SVG icons directly in the button HTML

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        .svg-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
        }
        .svg-btn svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }
        .svg-btn:hover {
            background-color: #1e7e34;
        }
    </style>
</head>
<body>
    <button class="svg-btn">
        <svg viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        </svg>
        Add Item
    </button>
    <button class="svg-btn">
        <svg viewBox="0 0 24 24">
            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
        </svg>
        Delete
    </button>
</body>
</html>

Two green buttons with inline SVG icons: "Add Item" with a plus icon and "Delete" with a trash icon. The icons scale with the button text and inherit the button's color.

Comparison

Method Pros Cons Best For
Font Libraries Easy to use, large icon sets External dependency Quick development
Background Images Custom icons, no dependencies HTTP requests for images Custom designs
Inline SVG Scalable, customizable, no dependencies Larger HTML file Performance-critical apps

Conclusion

Adding icons to HTML buttons enhances user experience and interface clarity. Font libraries offer convenience, background images provide flexibility, and inline SVG delivers performance and customization. Choose the method that best fits your project's requirements and constraints.

Updated on: 2026-03-15T15:46:15+05:30

16K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements