About {{iconName}}

How to Add {{iconName}} Icons to Your Website

Method 1: Inline SVG (Recommended)

The best way to add your {{iconName}} icon is by copying the SVG code directly into your HTML. This method offers the most flexibility and performance benefits.


                        <!-- Add this directly to your HTML -->

                        <svg class="{{iconSlug}}-icon" viewBox="0 0 24 24" width="24" height="24">

                          <path d="..." />

                        </svg>

Benefits of Inline SVG:

✅ No additional HTTP requests - faster page load
✅ Full CSS styling control - change colors with CSS
✅ Animatable with CSS or JavaScript
✅ Scales perfectly at any size
✅ Works offline once loaded

Method 2: SVG File

Download the {{iconName}} SVG file and reference it in your HTML. Good for reusing the same icon multiple times.


                        <!-- As an image -->

                        <img src="icons/{{iconSlug}}.svg" alt="{{iconName}}" width="24" height="24">


                        <!-- As a background image -->

                        <div class="{{iconSlug}}-bg" style="background-image: url('icons/{{iconSlug}}.svg');"></div>

Method 3: PNG Format

Use PNG when you need compatibility with older browsers or email clients that don't support SVG.


                        <img src="icons/{{iconSlug}}-64.png" alt="{{iconName}}" width="32" height="32">

SVG vs PNG: Which Should You Choose?

Choose SVG When:

You need scalable graphics
File size matters (SVGs are smaller)
You want to animate or style with CSS
Supporting modern browsers only
Building responsive designs

Choose PNG When:

Email compatibility is required
Supporting legacy browsers
Using in Microsoft Office
Complex gradients or effects
Printing requirements

Common Implementation Tips

⚠️ Watch Out For:

Color conflicts: Remove fill attributes from SVG if you want CSS control
Size issues: Always set width/height or use viewBox for proper scaling
CORS errors: Host SVG files on the same domain when using as background images
Accessibility: Always include alt text or aria-label for screen readers

Making Your {{iconName}} Icon Accessible


                        <!-- For decorative icons -->

                        <svg aria-hidden="true" role="img">...</svg>


                        <!-- For clickable icons -->

                        <a href="https://{{iconSlug}}.com/profile" aria-label="Visit our {{iconName}} page">

                          <svg>...</svg>

                        </a>


                        <!-- With visible text -->

                        <button>

                          <svg aria-hidden="true">...</svg>

                          <span>Follow on {{iconName}}</span>

                        </button>

Styling Your {{iconName}} Icon


                        /* CSS for inline SVG */

                        .{{iconSlug}}-icon {

                          width: 32px;

                          height: 32px;

                          fill: currentColor; /* Inherits text color */

                          transition: transform 0.2s;

                        }


                        .{{iconSlug}}-icon:hover {

                          transform: scale(1.1);

                          fill: #667eea; /* Custom hover color */

                        }

{{iconName}} SVG Icon (Free Download)

Build Your Own Icon Set