Icons for Web
Styling

Styling Icons with CSS

Hugeicons are built to be easily customizable with CSS. Whether you're using our Icon Font or Icon Sets, you can control the appearance of your icons using standard CSS properties. This guide covers all the ways you can style icons to match your design perfectly.

Basic Styling

Changing Icon Size

You can adjust icon size using the font-size property. The icon will scale proportionally to maintain its aspect ratio.

<!-- Small icon (16px) -->
<i class="hgi-stroke hgi-user" style="font-size: 16px;"></i>
 
<!-- Medium icon (24px) -->
<i class="hgi-stroke hgi-user" style="font-size: 24px;"></i>
 
<!-- Large icon (48px) -->
<i class="hgi-stroke hgi-user" style="font-size: 48px;"></i>
 
<!-- Extra large icon (64px) -->
<i class="hgi-stroke hgi-user" style="font-size: 64px;"></i>

Using CSS Classes

For consistency across your project, define reusable size classes:

.icon-xs {
    font-size: 12px;
}
 
.icon-sm {
    font-size: 16px;
}
 
.icon-md {
    font-size: 24px;
}
 
.icon-lg {
    font-size: 32px;
}
 
.icon-xl {
    font-size: 48px;
}
 
.icon-2xl {
    font-size: 64px;
}
<i class="hgi-stroke hgi-user icon-md"></i>
<i class="hgi-stroke hgi-home icon-lg"></i>
<i class="hgi-stroke hgi-heart icon-xl"></i>

Changing Icon Color

Icons inherit the text color from their parent element, or you can set it directly using the color property.

<!-- Inherit parent color -->
<div style="color: #3b82f6;">
    <i class="hgi-stroke hgi-user"></i>
</div>
 
<!-- Direct color styling -->
<i class="hgi-stroke hgi-user" style="color: #ef4444;"></i>
<i class="hgi-stroke hgi-home" style="color: #10b981;"></i>
<i class="hgi-stroke hgi-heart" style="color: #f59e0b;"></i>

Using CSS Custom Properties (Variables)

Define color palettes using CSS variables for easy theming:

:root {
    --icon-primary: #3b82f6;
    --icon-secondary: #8b5cf6;
    --icon-success: #10b981;
    --icon-danger: #ef4444;
    --icon-warning: #f59e0b;
    --icon-info: #06b6d4;
    --icon-muted: #6b7280;
}
 
.icon-primary {
    color: var(--icon-primary);
}
 
.icon-secondary {
    color: var(--icon-secondary);
}
 
.icon-success {
    color: var(--icon-success);
}
 
.icon-danger {
    color: var(--icon-danger);
}
 
.icon-warning {
    color: var(--icon-warning);
}
 
.icon-info {
    color: var(--icon-info);
}
 
.icon-muted {
    color: var(--icon-muted);
}
<i class="hgi-stroke hgi-check icon-success"></i>
<i class="hgi-stroke hgi-alert icon-danger"></i>
<i class="hgi-stroke hgi-info icon-info"></i>

Advanced Styling

Icon Stroke Width

For stroke-style icons, you can adjust the stroke width (though this depends on the SVG implementation):

.icon-thin {
    stroke-width: 1px;
}
 
.icon-regular {
    stroke-width: 1.5px;
}
 
.icon-bold {
    stroke-width: 2px;
}

Adding Backgrounds

Create icon buttons or badges by adding backgrounds:

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #f3f4f6;
    color: #1f2937;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
 
.icon-button:hover {
    background-color: #e5e7eb;
    transform: scale(1.05);
}
 
.icon-button.primary {
    background-color: #3b82f6;
    color: white;
}
 
.icon-button.primary:hover {
    background-color: #2563eb;
}
 
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 24px;
}
<button class="icon-button">
    <i class="hgi-stroke hgi-user"></i>
</button>
 
<button class="icon-button primary">
    <i class="hgi-stroke hgi-heart"></i>
</button>
 
<div class="icon-circle">
    <i class="hgi-stroke hgi-star"></i>
</div>

Icon Animations

Add visual interest with CSS animations:

/* Spin animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
 
.icon-spin {
    animation: spin 2s linear infinite;
}
 
/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
 
.icon-pulse {
    animation: pulse 2s ease-in-out infinite;
}
 
/* Bounce animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
 
.icon-bounce {
    animation: bounce 1s ease-in-out infinite;
}
 
/* Shake animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}
 
.icon-shake {
    animation: shake 0.5s ease-in-out;
}
 
/* Beat animation (perfect for hearts) */
@keyframes beat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1);
    }
}
 
.icon-beat {
    animation: beat 1s ease-in-out infinite;
}
<i class="hgi-stroke hgi-loading icon-spin"></i>
<i class="hgi-stroke hgi-notification icon-pulse"></i>
<i class="hgi-stroke hgi-arrow-down icon-bounce"></i>
<i class="hgi-stroke hgi-heart icon-beat"></i>

Hover Effects

Create interactive hover effects:

.icon-hover {
    transition: all 0.3s ease;
    cursor: pointer;
}
 
.icon-hover:hover {
    color: #3b82f6;
    transform: scale(1.2);
}
 
.icon-rotate-hover {
    transition: transform 0.3s ease;
}
 
.icon-rotate-hover:hover {
    transform: rotate(15deg);
}
 
.icon-fade-hover {
    transition: opacity 0.3s ease;
}
 
.icon-fade-hover:hover {
    opacity: 0.6;
}

Shadows and Effects

Add depth to your icons with shadows:

.icon-shadow {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
 
.icon-shadow-lg {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}
 
.icon-glow {
    filter: drop-shadow(0 0 8px currentColor);
}
 
.icon-glow-hover {
    transition: filter 0.3s ease;
}
 
.icon-glow-hover:hover {
    filter: drop-shadow(0 0 12px currentColor);
}
<i class="hgi-stroke hgi-star icon-shadow" style="color: #f59e0b; font-size: 32px;"></i>
<i class="hgi-stroke hgi-heart icon-glow" style="color: #ef4444; font-size: 32px;"></i>

Responsive Icons

Make icons responsive to screen size using media queries:

.responsive-icon {
    font-size: 24px;
}
 
@media (max-width: 768px) {
    .responsive-icon {
        font-size: 20px;
    }
}
 
@media (max-width: 480px) {
    .responsive-icon {
        font-size: 16px;
    }
}

Or use CSS clamp for fluid sizing:

.fluid-icon {
    font-size: clamp(16px, 4vw, 48px);
}

Icon in Buttons

Combine icons with text in buttons:

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background-color: #3b82f6;
    color: white;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
 
.btn:hover {
    background-color: #2563eb;
}
 
.btn i {
    font-size: 20px;
}
 
.btn-outline {
    background-color: transparent;
    border: 2px solid #3b82f6;
    color: #3b82f6;
}
 
.btn-outline:hover {
    background-color: #3b82f6;
    color: white;
}
<button class="btn">
    <i class="hgi-stroke hgi-download"></i>
    Download
</button>
 
<button class="btn">
    Upload
    <i class="hgi-stroke hgi-upload"></i>
</button>
 
<button class="btn-outline">
    <i class="hgi-stroke hgi-share"></i>
    Share
</button>

Icon Lists

Style icons in lists:

.icon-list {
    list-style: none;
    padding: 0;
}
 
.icon-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}
 
.icon-list li i {
    font-size: 20px;
    color: #3b82f6;
    flex-shrink: 0;
}
<ul class="icon-list">
    <li>
        <i class="hgi-stroke hgi-check"></i>
        <span>High-quality icons</span>
    </li>
    <li>
        <i class="hgi-stroke hgi-check"></i>
        <span>Easy to customize</span>
    </li>
    <li>
        <i class="hgi-stroke hgi-check"></i>
        <span>Multiple styles available</span>
    </li>
</ul>

Dark Mode Support

Create icons that adapt to dark mode:

:root {
    --icon-color: #1f2937;
}
 
@media (prefers-color-scheme: dark) {
    :root {
        --icon-color: #f9fafb;
    }
}
 
.icon-adaptive {
    color: var(--icon-color);
}

Or use explicit dark mode classes:

.dark .icon-dark {
    color: #f9fafb;
}
 
.light .icon-dark {
    color: #1f2937;
}

Best Practices

Accessibility

Always ensure icons are accessible:

<!-- Use aria-label for standalone icons -->
<button>
    <i class="hgi-stroke hgi-user" aria-label="User profile"></i>
</button>
 
<!-- Hide decorative icons from screen readers -->
<span>
    <i class="hgi-stroke hgi-heart" aria-hidden="true"></i>
    Favorite
</span>
 
<!-- Provide text alternatives -->
<button aria-label="Delete item">
    <i class="hgi-stroke hgi-delete" aria-hidden="true"></i>
    <span class="sr-only">Delete item</span>
</button>

Performance Tips

  1. Use CSS Classes: Define reusable classes instead of inline styles
  2. Limit Animations: Use animations sparingly to avoid performance issues
  3. Cache CDN Resources: Let browsers cache icon fonts from CDN
  4. Combine Styles: Group similar icons with shared classes

Common Patterns

Here's a complete example combining multiple styling techniques:

/* Icon container system */
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 12px;
    background-color: #f3f4f6;
    transition: all 0.2s ease;
}
 
.icon-container:hover {
    background-color: #e5e7eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
 
.icon-container i {
    font-size: 24px;
    color: #1f2937;
}
 
.icon-container.primary i {
    color: #3b82f6;
}
 
.icon-container.success i {
    color: #10b981;
}
 
.icon-container.danger i {
    color: #ef4444;
}
<div class="icon-container primary">
    <i class="hgi-stroke hgi-user"></i>
</div>
 
<div class="icon-container success">
    <i class="hgi-stroke hgi-check"></i>
</div>
 
<div class="icon-container danger">
    <i class="hgi-stroke hgi-alert"></i>
</div>

Complete Example

Here's a full example showcasing various styling techniques:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hugeicons Styling Examples</title>
    <link rel="stylesheet" href="https://cdn.hugeicons.com/font/hgi-stroke-rounded.css">
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            padding: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
 
        .section {
            margin-bottom: 40px;
        }
 
        .section h2 {
            margin-bottom: 20px;
            color: #1f2937;
        }
 
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 20px;
        }
 
        .icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 20px;
            border-radius: 12px;
            background-color: #f9fafb;
            transition: all 0.2s ease;
        }
 
        .icon-item:hover {
            background-color: #f3f4f6;
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
 
        .icon-item i {
            font-size: 32px;
        }
 
        .icon-item span {
            font-size: 12px;
            color: #6b7280;
        }
    </style>
</head>
<body>
    <div class="section">
        <h2>Icon Sizes</h2>
        <div class="icon-grid">
            <div class="icon-item">
                <i class="hgi-stroke hgi-user" style="font-size: 16px;"></i>
                <span>16px</span>
            </div>
            <div class="icon-item">
                <i class="hgi-stroke hgi-user" style="font-size: 24px;"></i>
                <span>24px</span>
            </div>
            <div class="icon-item">
                <i class="hgi-stroke hgi-user" style="font-size: 32px;"></i>
                <span>32px</span>
            </div>
            <div class="icon-item">
                <i class="hgi-stroke hgi-user" style="font-size: 48px;"></i>
                <span>48px</span>
            </div>
        </div>
    </div>
 
    <div class="section">
        <h2>Icon Colors</h2>
        <div class="icon-grid">
            <div class="icon-item">
                <i class="hgi-stroke hgi-heart" style="color: #ef4444;"></i>
                <span>Red</span>
            </div>
            <div class="icon-item">
                <i class="hgi-stroke hgi-star" style="color: #f59e0b;"></i>
                <span>Orange</span>
            </div>
            <div class="icon-item">
                <i class="hgi-stroke hgi-check" style="color: #10b981;"></i>
                <span>Green</span>
            </div>
            <div class="icon-item">
                <i class="hgi-stroke hgi-home" style="color: #3b82f6;"></i>
                <span>Blue</span>
            </div>
        </div>
    </div>
</body>
</html>

Now you have all the tools you need to style Hugeicons perfectly for your project! Experiment with these techniques and create beautiful, consistent icon implementations across your application.

Use a SetMCP Server