DEV Community: pooja verma

Stop Hardcoding SVGs in Your Components. Here's a Better Workflow.

pooja verma — Fri, 19 Jun 2026 05:04:45 +0000

If your React/Vue/Svelte codebase has more than a handful of icons, I'd bet money at least three of them are duplicated
The cost isn't really aesthetic. It's maintenance. When design wants to switch your icon weight from outline to filled across the app, you're now doing a find-and-replace across a dozen files instead of swapping one prop.

The fix is boring: pick one source of truth before you write a single icon component.

*## Here's the pattern I've settled on for most projects now.
*
*1. Source from one consistent icon set, not several
*
Mixing icon libraries is the root cause of 90% of "why does this icon look slightly off" bugs. I pull from Free SVG Icons because everything in the set shares the same grid and stroke logic, so swapping between outlined and filled variants later doesn't break visual rhythm — they're built on the same underlying paths, not two unrelated icon packs.

*2. Build a single component, not inline SVGs everywhere
*
jsxfunction Icon({ name, size = 24, color = "currentColor" }) {
return (

);
}
This is where format choice actually matters. If you're sprite-sheeting, you want clean SVG exports, not PNGs with baked-in dimensions. Grab the raw SVGs in bulk rather than screenshotting icons from a webpage (yes, people do this).

*3. Compress before you commit
*
SVGs from icon libraries often carry unnecessary metadata, comments, or precision you don't need at 24px. Before they go in the repo, I run them through an image compressor — it's saved real bytes on projects with 100+ icon sprites, which matters more than people assume once you're shipping to mobile networks.

*4. If you need a quick visual tweak, don't reopen Figma for a 2px stroke change
*
For small adjustments — recoloring, adjusting stroke width, resizing the artboard — there's a browser-based SVG editor that's faster than round-tripping through a design tool for something trivial.

*5. If your team lives in Figma, close the loop with a plugin
*
Designers exporting icons and Slacking them to devs is a workflow smell. The Figma plugin pulls icons directly into the file, so design and dev are referencing the same source instead of two slightly-out-of-sync copies.

The actual point

None of this is about which icon pack is "prettiest." It's about treating icons as a system instead of a folder of loose assets. Once you centralize the source, swapping styles, fixing inconsistencies, or scaling to a new platform (web → mobile → design system) stops being a multi-day refactor and becomes a config change.
If you're mid-refactor on this right now: rip out the inline SVGs first. Everything else is easier once that's done.

Free SVG Icons: Why Most Developers Are Using Them Wrong (And How to Fix It)

pooja verma — Mon, 15 Jun 2026 05:32:25 +0000

Here is the plain text article — just copy and paste it into Dev.to editor:

Title: Free SVG Icons: Why Most Developers Are Using Them Wrong (And How to Fix It)
Description: SVG icons are everywhere in modern UI, but bad implementation choices are quietly hurting your performance and accessibility. Here's what to do instead.
Tags: webdev, svg, frontend, design

You've seen this codebase before. Someone builds a clean UI, ships it, and then spends the next week wondering why Lighthouse is angry and screen readers are confused. Half the time, the culprit is icon implementation — specifically, the lazy shortcuts developers take when grabbing free SVG icons and dropping them in without thinking.
This isn't a post about why SVG beats icon fonts. That debate ended years ago. This is about what goes wrong after you decide to use SVG — and how to fix it before it costs you.

The Grab-and-Drop Problem
Most developers find a free SVG icon pack, download what they need, and inline the files directly into their HTML. That works. Until it doesn't.
Three things break almost every time:
First, developers inline the SVG and forget to add role="img" and aria-label. A shopping cart icon that visually says "add to cart" means absolutely nothing to a screen reader if it's a naked SVG block with no semantic context. Always add a title element inside your SVG and label it properly.
Second, developers hardcode width and height instead of relying on viewBox. Fixed pixel dimensions break the moment someone changes display scaling or drops the same icon into a different layout. Set viewBox, strip fixed dimensions, and control size through CSS.
Third, developers download 200 icons and load all of them. I've seen production builds with entire icon libraries bundled in — including icons that appear on exactly zero live pages. Only ship what you actually use.

Picking a Free SVG Icon Source Worth Using
Not all free SVG icon libraries are equal. A lot of them have inconsistent viewBox dimensions across icon sets, murky licensing that says "free" but means "free for personal use only," and no fallback format options when SVG doesn't render correctly in a given context.
I've been using IamVector (https://iamvector.com/) for production projects and it covers most of what you actually need. A few things worth knowing about it:
Icons are royalty-free and available in SVG, PNG, and WEBP formats. You can browse by category at https://iamvector.com/icons or filter by tag depending on what you're hunting for.
They have both filled icons (https://iamvector.com/all-icons/filled-icons) and outlined icons (https://iamvector.com/all-icons/outlined-icons) — which matters a lot when you're trying to maintain visual consistency across a product UI. Mixing filled and outlined styles in the same interface looks sloppy and users notice even if they can't articulate why.
There's also a colored icon collection (https://iamvector.com/all-icons/colored-icons) for situations where monochrome doesn't cut it — brand logos, category illustrations, status indicators.
If you're working in Figma, there's an official plugin that lets you pull icons directly without leaving your design tool. And if you need to preview or edit SVG code before using it, the SVG Editor at https://iamvector.com/svg-editor gives you a real-time preview environment. For format conversion, the image converter at https://iamvector.com/image-converter handles SVG-to-PNG without needing a separate tool.

The One CSS Trick That Makes SVG Icons Maintainable
If you want your SVG icons to automatically inherit the text color of their parent element — so an icon inside a white-text button turns white without you maintaining separate colored variants — use currentColor as the fill value inside your SVG path.
This means you control icon color entirely through CSS. One property, no redundant icon variants, no color mismatches when your design system updates.

Stop Bundling Entire Icon Libraries
This one is simple but ignored constantly. If you're using an icon library as an npm package, tree-shaking only works if you import icons individually. Importing from the top-level package index pulls everything in.
Import the specific icon file directly. It takes ten seconds longer to write and it can cut your bundle size significantly depending on the library size.

Accessibility Is Not a Nice-to-Have
Before you ship any icon-heavy interface, run through this quickly:
Decorative icons — ones that are purely visual and paired with visible text — should have aria-hidden="true" so screen readers skip them entirely.
Functional icons — icons that are the only content inside a button or link — need an aria-label or a visually hidden text label. "Click here" with only an arrow icon is not accessible.
Touch targets around icon-only buttons need to be at least 44x44 pixels even if the visible icon is smaller. This is a WCAG requirement and a real usability issue on mobile.
Icons should never be the sole indicator of state. An error state that's only communicated through a red icon fails users with color vision deficiencies. Pair color with text or pattern.

Format Decision: SVG, PNG, or WEBP
SVG wins for almost every UI use case — it scales perfectly, stays sharp at any resolution, and can be styled with CSS. Use it for anything inside your interface.
PNG is your fallback. It belongs in email HTML, Open Graph images, and anywhere SVG support is uncertain.
WEBP is for blog thumbnails, hero images, and content assets where file size matters more than editability.
IamVector lets you download any icon in all three formats from the same page, which saves the annoying conversion step when you need multiple formats for the same asset.

The Bottom Line
Free SVG icons are one of the best resources available to frontend developers right now. The bottleneck is never the icons themselves — it's how they get implemented. Get the accessibility attributes right, control size through CSS, only load what you use, and pick a source with clean licensing so you're not second-guessing yourself in production.
IamVector covers the library side: https://iamvector.com/ — royalty-free, multiple formats, filled and outlined styles, a working Figma plugin, and tools to handle editing and conversion without leaving the site.
The implementation side is on you. Now you have no excuse.

Stop Importing 300KB Icon Packs - Here's How I Use Free SVG Icons Surgically in React published

pooja verma — Fri, 05 Jun 2026 04:51:20 +0000

Every frontend developer has done this at least once.
You need a single shopping cart icon. So you npm install heroicons or drop in FontAwesome, and now your bundle ships 400+ icons the user never sees. The Lighthouse score takes a hit, the designer asks why the site feels slow, and you spend an afternoon explaining tree-shaking to someone who didn't ask.
There's a better way — and it starts with treating icons like what they actually are: raw SVG code you control completely.

The real cost of icon libraries as npm packages
Icon packages feel convenient until they're not. Here's what actually happens when you pull in a full icon set:

Bundle bloat, even with tree-shaking, because bundlers don't always eliminate unused SVG paths cleanly
Version lock-in — upgrading a library version can silently change icon shapes or stroke weights
No customization depth — you can change color and size, but deeper path-level control requires forking

The alternative: grab individual free SVG icons, drop them inline, and own every pixel.

Where to get production-ready free SVG icons
I've been using iamvector.com as my go-to source for this. The library is genuinely free and royalty-free for commercial use — no attribution required, no licensing gotchas.
A few things worth knowing about it:

20K+ filled icons and 15K+ outlined icons — browsable at iamvector.com/all-icons/filled-icons and iamvector.com/all-icons/outlined-icons
Icons are organized by category at iamvector.com/categories — useful when you need a whole set for a feature (e-commerce, dashboard, auth flows, etc.)
You can download each icon as .svg, .png, or .webp — the SVG downloads are clean, no junk attributes
There's a Figma plugin if your team uses Figma for handoffs, so designers and devs work from the same source

The icons come in multiple visual styles — outlined, filled, and colored — so you can maintain visual consistency across a UI without fighting a third-party design system.

The pattern I actually use in React
Once you have the SVG file, here's the workflow that scales cleanly.
Step 1: Clean the SVG download
Downloaded SVGs sometimes have fixed width and height attributes, inline colors hardcoded as hex, or a fill="black" you don't want. Before adding to your project, strip those:
svg

fill="currentColor" is the key change. It makes the icon inherit color from CSS, which means you theme it with a single CSS variable instead of editing SVG attributes.
Step 2: Create a typed React component
tsx// src/components/icons/CartIcon.tsx
import { SVGProps } from 'react';

interface IconProps extends SVGProps {
size?: number;
}

export function CartIcon({ size = 24, className, ...props }: IconProps) {
return (

width={size}
height={size}
fill="currentColor"
className={className}
aria-hidden="true"
{...props}
>

);
}
Step 3: Use it anywhere
tsx// Inherits color from parent text color

// Explicit size

// As a button with accessible label

No import of an entire library. No runtime overhead. The icon is just markup.

Scaling this to a full icon system
Once you have more than a handful of icons, a flat folder of components gets messy. Here's the structure I use:
src/
components/
icons/
index.ts ← barrel export
CartIcon.tsx
UserIcon.tsx
SearchIcon.tsx
DashboardIcon.tsx
The index.ts just re-exports everything:
tsexport { CartIcon } from './CartIcon';
export { UserIcon } from './UserIcon';
export { SearchIcon } from './SearchIcon';
export { DashboardIcon } from './DashboardIcon';
Then imports stay clean across the app:
tsximport { CartIcon, UserIcon } from '@/components/icons';

A smarter approach: dynamic icon loader for large sets
If you end up with 50+ icons and want to lazy-load them (useful for icon pickers, admin dashboards, or any feature-gated UI), you can build a dynamic loader.
The trick is consistent file naming:
CartIcon.tsx → cart
UserIcon.tsx → user
SearchIcon.tsx → search
Then a generic component:
tsx// src/components/icons/DynamicIcon.tsx
import dynamic from 'next/dynamic';
import { ComponentType, SVGProps } from 'react';

interface DynamicIconProps extends SVGProps {
name: string;
size?: number;
}

export function DynamicIcon({ name, ...props }: DynamicIconProps) {
const IconComponent = dynamic>(
() =>
import(./${name.charAt(0).toUpperCase() + name.slice(1)}Icon).then(
(mod) => mod[${name.charAt(0).toUpperCase() + name.slice(1)}Icon]
),
{ ssr: false }
);

return ;
}
Usage:
tsx// Only loads CartIcon.js when this component renders

This is particularly useful in Next.js where you might have a settings panel or icon selector that doesn't need to ship on the critical path.

Accessibility you shouldn't skip
A lot of SVG icon implementations ignore accessibility. Two patterns worth using:
For decorative icons (next to visible text):
tsx

Add to cart

For standalone icon buttons:
tsx

The aria-hidden="true" on decorative icons prevents screen readers from announcing "image" before every icon in a list.

Bonus: inline SVG vs
You'll sometimes see SVGs loaded as image sources:
tsx
This works but you lose:

CSS color theming via currentColor
Hover/focus state changes without JavaScript
The ability to animate individual paths with CSS

Inline SVG components give you full CSS control. The tradeoff is a slightly larger HTML payload — worth it for interactive UI icons, less so for large illustrative graphics.
For static illustrations or logos where you don't need CSS theming, the approach is fine.

Putting it together
The workflow in practice:

Find the icon you need at iamvector.com/icons — browse by category or search by tag
Download the .svg file
Clean it: remove fixed dimensions, replace hardcoded fill with currentColor
Wrap it in a typed React component
Export from your icons barrel file

You end up with a lean, fully-typed icon system that has zero dependencies, ships exactly what you use, and gives you complete control over styling.
The icons at iamvector.com are particularly useful for this pattern because the SVG downloads are clean — no embedded raster data, no bloated metadata, just paths. The SVG editor on the site also lets you preview and tweak icons in-browser before downloading, which saves time when you're adjusting stroke weights or viewBox padding for a specific use case.

If you've been reaching for npm install every time you need an icon, try the inline approach on your next project. The bundle will thank you.

The Developer's Complete Guide to Free SVG Icons in 2026 (And Where to Actually Find Them)

pooja verma — Wed, 27 May 2026 04:30:38 +0000

If you've ever scrambled through half a dozen sites trying to find the right icon — only to discover it costs money, requires attribution in 12 places, or downloads as a low-res PNG from 2012 — you know the pain.
Free SVG icons sound simple. In practice, finding a reliable, consistent, royalty-free library that actually fits your project can eat an embarrassing amount of dev time.
This guide is for developers and designers who want to stop wasting that time. I'll cover:

Why SVG is the right format for icons in 2026
What to look for in a free icon library
How to use SVG icons efficiently in your projects
A real look at one of the best free SVG icon libraries available today

Let's dive in.

Why SVG Icons Belong in Every Developer's Workflow
Before we get into where to find free SVG icons, it's worth understanding why the format matters so much.
SVG Scales Infinitely Without Losing Quality
SVG (Scalable Vector Graphics) is resolution-independent. Whether your icon renders at 16px on a mobile nav bar or 256px on a hero section, it stays sharp. PNG and JPEG icons pixelate or require you to export multiple sizes. SVG doesn't have that problem.
SVG Files Are Tiny
A typical SVG icon is anywhere from 1KB to 5KB. Compare that to a PNG equivalent at 2x or 3x resolution for retina displays, and SVG wins on performance every time. Fewer bytes = faster load times = better Core Web Vitals scores.
SVG Is Fully Controllable with CSS
This is the big one for developers. SVG icons respond to CSS properties like fill, stroke, width, and height. You can theme your entire icon set with one CSS variable change:
css:root {
--icon-color: #2A3443;
}

svg {
fill: var(--icon-color);
}
No exporting new icons. No Photoshop. Just clean, maintainable code.
SVG Supports Animation
Need a loading spinner, an animated toggle, or a hover effect? SVG handles animation natively through CSS transitions or the Web Animations API. Lottie animations are great, but for simple micro-interactions, a well-crafted SVG is often faster and lighter.

What Makes a Good Free SVG Icon Library?
Not all icon libraries are created equal. Here's what I look for before committing a library to a project:

Consistent Visual Style Icons should feel like they belong together. Mixing stroke weights, corner radii, or design philosophies inside a single UI creates visual noise that users notice subconsciously. A good library maintains consistency across its entire catalog.
Multiple Styles Available Real-world projects need variety. You might want outlined icons for a minimalist dashboard, filled icons for a mobile app's tab bar, and colored icons for a landing page. Libraries that offer all three styles from the same design system save you from mismatched sets.
True Royalty-Free Licensing "Free" can mean many things. Some libraries are free for personal use only. Others require attribution. The best option for commercial projects is a library that is genuinely royalty-free — no strings attached, no legal headaches.
Multiple Download Formats SVG is the priority, but PNG and WEBP exports matter too. Sometimes you're dropping icons into a presentation, a PDF, or a context where SVG isn't supported. Having all three formats on demand from a single source is a real time-saver.
An Active, Growing Catalog An icon library that hasn't been updated since 2020 is going to have gaps. Modern UI patterns — dark mode toggles, AI-related icons, updated brand logos — need a library that keeps pace with design trends.
Developer-Friendly Tooling The best libraries don't just give you files. They offer tools like SVG editors, image converters, Figma plugins, and organized categories so you can find and customize icons without leaving your workflow.

IamVector: A Free SVG Icon Library Worth Bookmarking
One library that checks every box above is IamVector — an open-source vector icon platform with a rapidly growing catalog of SVG, PNG, and WEBP icons, all available for free.
Here's what makes it stand out for developers.
Massive, Categorized Icon Library
IamVector's icon library is organized by category, style, and occasion, making it easy to find exactly what you need without endless scrolling. You can browse by:

Filled Icons — 20,000+ solid icons perfect for mobile apps and bold UI elements
Outlined Icons — 15,000+ stroke-style icons ideal for minimalist and modern web UIs
Colored Icons — Multicolor SVG icons for landing pages, marketing materials, and playful interfaces

The library spans everything from technology and business to fitness, travel, food, religion, and kids' content. Browsing by categories or tags makes it fast to narrow down your search, and the trending section surfaces the most-downloaded icons of the day.
Three Download Formats, Zero Cost
Every icon on IamVector downloads in SVG, PNG, or WEBP format — your choice. This matters on real projects:

SVG for web components and scalable UI
PNG for presentations, email templates, and legacy contexts
WEBP for performance-optimized modern web projects

No paywalls. No watermarks. No attribution required for commercial use.
Built-In Developer Tools
This is where IamVector separates itself from a typical icon dump. The platform ships with a suite of tools that live alongside the icon library:
SVG Editor
A real-time SVG code editor with live preview. Paste or write SVG code and see the result instantly. Useful for tweaking an icon's path, adjusting stroke width, or debugging rendering issues without firing up a separate tool.
Image Compressor
Compress images without visible quality loss — up to 75% file size reduction. Essential for keeping page load times fast when you're using multiple icons or illustrations.
Image Converter
Convert between formats on the fly. The SVG-to-PNG converter is particularly useful when you need a rasterized version of a vector icon for platforms that don't support SVG.
QR Generator
A bonus tool that lets you generate QR codes without leaving the platform.
Figma Plugin for Direct Workflow Integration
If your design-to-development workflow runs through Figma (and most do in 2026), IamVector's official Figma plugin is worth installing. You can browse and insert icons directly inside Figma without ever navigating to an external site. It eliminates the download-import-place cycle and keeps your component library clean.
The plugin has 385,000+ total searches and 36,000+ registered users, which says something about adoption in the developer and design community.
Collections for Team Projects
IamVector lets you create named collections — curated sets of icons organized by project, theme, or client. You can share collections instantly with teammates or clients, making it a low-friction solution for design handoffs.

How to Use Free SVG Icons Effectively in Your Projects
Finding icons is step one. Using them well is step two. Here are the patterns I rely on.
Inline SVG vs. Tag: Know the Difference
tag approach:
html
Simple, cacheable, but you lose the ability to style the icon with CSS.
Inline SVG approach:
html

More verbose, but CSS has full control. Use currentColor to inherit the parent element's text color — this alone solves 80% of icon theming problems.
CSS Custom Properties for Icon Theming
css/* Define once */
:root {
--icon-primary: #2A3443;
--icon-accent: #0f8c7e;
--icon-size-sm: 16px;
--icon-size-md: 24px;
--icon-size-lg: 32px;
}

/* Apply everywhere */
.icon {
width: var(--icon-size-md);
height: var(--icon-size-md);
fill: var(--icon-primary);
}

.icon--accent {
fill: var(--icon-accent);
}
Switch themes by updating two variables. Every icon in your project updates automatically.
Sprite Sheets for Performance
If you're using 30+ icons across a project, consider building an SVG sprite sheet:
html

One HTTP request for all icons. Easily cacheable. Simple to update.
Accessibility: Don't Skip This
Icons communicate meaning. Make that meaning accessible:
html

Close dialog

Search
...

Using visually hidden text (.sr-only) paired with aria-hidden="true" on the SVG is the cleanest pattern for interactive elements.

Common Mistakes Developers Make with SVG Icons
Mistake 1: Not Optimizing SVGs Before Shipping
Icons downloaded from any library often contain editor metadata, unnecessary comments, and redundant attributes. Run them through IamVector's Image Compressor or a tool like SVGO before including them in production.
Mistake 2: Hardcoding Colors into SVG Paths
If your SVG has fill="#2A3443" baked into every , CSS theming won't work. Either replace hardcoded values with currentColor or use CSS custom properties at the SVG level.
Mistake 3: Using Raster Images When SVG Is Available
Some developers reach for PNG by habit. On the web in 2026, SVG is almost always the better choice for icons and simple illustrations. If you're not sure whether an icon is available as SVG, check IamVector's icon library — the selection covers most standard UI needs.
Mistake 4: Ignoring Viewbox Consistency
Mixing icons from different libraries often means mixing viewBox dimensions (0 0 24 24 vs 0 0 512 512). This causes inconsistent sizing even when width and height are set identically. Stick to one library per project when possible to keep viewBox consistent.

Quick Reference: Free SVG Icon Workflow
Here's the workflow I follow for every project:

Define icon needs — list every icon the UI requires before hunting
Browse by category — use IamVector's category browser to find consistent sets
Download SVG format — always prefer SVG unless the target doesn't support it
Optimize — compress with IamVector's Image Compressor before adding to the project
Implement inline or as sprite — choose based on project scale
Theme with CSS custom properties — never hardcode colors
Add accessibility attributes — every icon needs intentional aria-* handling
Create a collection — save your chosen icons in an IamVector collection for future reference and team sharing

Final Thoughts
Free SVG icons are one of those resources that seem simple until you actually try to find a reliable, consistent, well-maintained source of them. Most libraries either charge for the good stuff, bury commercial use restrictions in the fine print, or lack the tools to make icons actually usable in a modern workflow.
IamVector stands out because it approaches the problem like a developer would: clean format support, built-in tooling, Figma integration, and a genuinely open catalog that keeps growing. Whether you need outlined icons for a SaaS dashboard, filled icons for a mobile app, or colored icons for a marketing site, it's worth making it your first stop.
If you found this useful, share it with a designer or frontend dev who's still wasting time hunting for icons. And drop a comment — I'd love to hear which icon library you've been relying on and why.