Post #115 you added Font Awesome - easy but adds 1 external CDN file = 50KB + 1 request = slows site. SVG icons = no CDN, no request, inline code, 0KB extra, faster, no square box error.
In Post #116, you'll replace Font Awesome with SVG icons for speed.
Step 1: Font Awesome vs SVG Icons
| Feature | Font Awesome | SVG Icons |
| Speed | 1 CDN request 50KB | 0 request, inline 1KB |
| Error | Square box if CDN fails | Never fails - code inside |
| Custom | Limited colors | Any color, size, animation |
| SEO | Good | Best - no external, Core Web Vitals pass |
| Winner for Blogger | Beginner easy | Pro faster - use this |
Step 2: Where to Get Free SVG Icons
- Best sites:
- icones.js.org (search any icon, copy SVG)
- heroicons.com (Tailwind free SVGs)
- icons.getbootstrap.com (Bootstrap icons)
- fontawesome.com → Search icon → Click "SVG" tab → Copy SVG code
- For this post, use my ready codes below - no need search.
Step 3: Add SVG Social Icons in Blogger Sidebar (Copy-Paste)
Go to Layout → Add Gadget → HTML/JavaScript → Paste:
<style>
.svg-social{display:flex;gap:12px;justify-content:center;}
.svg-social a{width:36px;height:36px;background:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.svg-social a svg{width:18px;height:18px;fill:#fff;}
.svg-social a:hover{background:#007bff;}
</style>
<div class="svg-social">
<a href="https://facebook.com/yourpage" target="_blank" title="Facebook">
<svg viewBox="0 0 24 24"><path d="M14 8H16V5C16 5 14.6 4.5 13.5 4.5C11.2 4.5 10 6 10 8V10H8V13H10V20H14V13H16L16.5 10H14V8Z"/></svg>
</a>
<a href="https://instagram.com/yourpage" target="_blank" title="Instagram">
<svg viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 2 .3 2.5.5.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.5.4 1.3.5 2.5.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 2-.5 2.5-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.5.2-1.3.4-2.5.5-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-2-.3-2.5-.5a3.6 3.6 0 0 1-1.4-.9 3.6 3.6 0 0 1-.9-1.4c-.2-.5-.4-1.3-.5-2.5C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.3-2 .5-2.5.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.5-.2 1.3-.4 2.5-.5C8.4 2.2 8.8 2.2 12 2.2ZM12 6.8A5.2 5.2 0 1 0 12 17.2A5.2 5.2 0 1 0 12 6.8ZM12 15A3 3 0 1 1 12 9A3 3 0 0 1 12 15ZM17.5 7.6A1.2 1.2 0 1 1 17.5 5.2A1.2 1.2 0 0 1 17.5 7.6Z"/></svg>
</a>
<a href="https://wa.me/2348000000000" target="_blank" title="WhatsApp">
<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20Zm4.6-6c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.1.2-.6.8-.7.9-.1.1-.3.2-.5.1-.2-.1-.9-.3-1.7-1-1.2-1.1-2-2.4-2.2-2.8-.2-.4 0-.6.2-.8.1-.2.2-.3.3-.4.1-.1.1-.2.2-.4.1-.1 0-.3 0-.4 0-.1-.5-1.2-.7-1.6-.2-.4-.3-.4-.5-.4h-.4c-.2 0-.4.1-.6.3-.2.2-.7.7-.7 1.7s.7 2 .8 2.1c.1.2 1.4 2.1 3.4 2.9 1.9.8 1.9.5 2.2.5.3 0 1.1-.4 1.3-.9.2-.4.2-.8.1-.9Z"/></svg>
</a>
</div>
Step 4: Add SVG Check, Star, Arrow Inside Blogger Posts
In Blogger post editor → HTML mode → Paste where you want icon:
| Icon | SVG Code Copy |
| Green Check | <svg style="width:18px;height:18px;vertical-align:middle;" viewBox="0 0 24 24" fill="none"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm4.3 7.3-5 5a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.4l1.3 1.3 4.3-4.3a1 1 0 0 1 1.4 1.4Z" fill="#22c55e"/></svg> Free domain |
| Gold Star | <svg style="width:18px;height:18px;vertical-align:middle;" viewBox="0 0 24 24" fill="#facc15"><path d="M12 2 14.9 8.5 22 9.3 16.8 14.3 18 21.5 12 18.2 6 21.5 7.2 14.3 2 9.3 9.1 8.5Z"/></svg> 5 Stars |
| Arrow Right | Download <svg style="width:16px;height:16px;vertical-align:middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg> |
Step 5: Add SVG Button (Best CTR)
<a href="YOUR-LINK" style="background:#000;color:#fff;padding:12px 22px;border-radius:6px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-weight:bold;"> <svg style="width:18px;height:18px;fill:#fff;" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Zm0 18a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8Zm-1-13h2v6h-2Zm0 8h2v2h-2Z"/></svg> Download Now </a>
Step 6: Speed Test - SVG vs Font Awesome
- Font Awesome CDN: Adds 1 external file + 50KB = PageSpeed 85
- SVG inline: 0 file + 1KB = PageSpeed 98-100
- For SEO 2026, use SVG only. Delete Font Awesome CDN from Step 2 of Post #115 if you added.
Post #116 Complete - You now have fast SVG icons, no CDN, no error.
Next Post #117 from your CSV: How to Create Button in Blogger Post - using SVG + CSS no plugin.
0 Comments