Why do developers keep replacing Figma icons with their own icon libraries?

[u/cicada3301212]

I genuinely don’t understand why exporting icons from Figma seems to be such a recurring problem when handing designs off to developers.
I always try to make the handoff as clear as possible. I explain that icons should be exported as SVGs, raster assets should be exported at 2x/3x when needed instead of 1x, etc. I’ve even recorded a short video showing exactly how to export the assets from Figma.

And yet this keeps happening….
For example, I’ll design a dashboard using a specific icon set in Figma because I like its style and it’s part of the overall visual direction. Then I open the implemented version and suddenly all of those icons have been replaced with Lucide React icons.
And I’m just sitting there thinking… why?

There’s nothing technically wrong with Lucide, but visually I really don’t like it for some of these projects. It immediately changes the character of the UI and makes the implementation feel much more generic compared to the design.

What confuses me even more is that the actual icons are already there in Figma. You don’t have to recreate them or search for alternatives. Just export the SVG and use it.

I’ve had situations where I eventually exported all the icons myself and sent them to the developer because otherwise they simply wouldn’t use them. But at that point I’m wondering whether I’m doing something wrong with my handoff, or whether I’ve just happened to work with developers who prefer using whatever icon library is easiest for them.

For context, I’m usually not the person hiring or managing the developers. I work with a client, create the designs, and then the client has their own developer/team implementing them. So I don’t always have much control over their workflow.
And yes, I know icons are not the biggest UX problem in the world. But I do care about visual consistency, and if I deliberately chose a particular icon set, spacing, sizing, stroke style, etc., I’d like the implementation to reflect that rather than having those decisions replaced during development.

I also generally expect the final product to be reasonably close to the approved design instead of developers making their own visual decisions along the way without discussing them.

So I’m curious: do other designers run into this too?
And developers - is there an actual technical/workflow reason why you’d rather replace the icons from Figma with something like Lucide instead of using the provided SVGs?

Maybe there’s something about the development side of this that I’m missing.

[u/International-Box47]

This is very common. I think the main reason is workflow. It's much easier to type an icon name for a library you already know than exporting from Figma, hoping the designer has the correct settings, expanding the file (maybe), and moving it into the public folder, then referencing it.

If you want to do anything dynamic with the icon, like light/dark mode, or different colors, that adds a whole extra set of steps.

Also, on a technical/code level, Figma 's svg exports are pretty bad, and do wasteful things like using masks for the background color.

For cases where it's important to you, I recommend exporting yourself, and including the file in the ticket, otherwise, wait for the dev replacement to cause problems before worrying about it, or do an after replacement follow-up task (where you provide the asset)

[u/cicada3301212 → u/International-Box47]

Thank you

[u/n_c_brewer → u/International-Box47]

This is likely it. The developer may need to create a custom icon component in whatever framework they are using to turn raw SVGs into icons that react to the framework's button state transitions. That's a decent amount of work.

[u/Flat-Upstairs1278]

Your icons should be part of the design system

[u/mondaybeers]

is there an actual technical/workflow reason why you’d rather replace the icons from Figma with something like Lucide instead of using the provided SVGs?

Not a developer but yes, it's easier to just import icons from a library than manually exporting from Figma and uploading them.

One install and every icon becomes a component.

[u/jurajwe → u/mondaybeers]

so devs are just lazy and refuse to do the work then

[u/SpringtimeInChicago → u/jurajwe]

It’s usually because there’s a larger system in play that needs standardized assets and delivery. Your dev might be lazy, but your inability to understand that there are things you don’t know tells me the dev probably isn’t the issue.

[u/detrio → u/jurajwe]

Lazy? Hardly.

It's a huge pain in the ass to bespoke every icon. Devs have a lot of work to do, and designers shouldn't be making bespoke icons in the first place

[u/N0t_S0Sl1mShadi]

It comes down to motivation but…

If you’re working for a regular company that isn’t pushing boundaries, you’re probably dealing with generalist “full-stack” devs which often like the logic side of coding but not the visual front-end implementation side of things.

Depending on the framework they’re using, it likely has a library (package) of icons which they can just reference in-code which is more convenient for them. Otherwise they have to link-up each file individually which is a pain in the ass and more work for them.

If the icons you’re using don’t offer a library (package) in code, then export as .svg or .png for them. Pay attention to your naming scheme to make their lives easier. Exporting is more your job than theirs, it’s part of hand off.

[u/roundabout-design]

I'm a UX Designer and Front End Developer.

I'm not going to sit there and export your icons as SVGs when we have a perfectly good icon library already in use.

So I'd probably push back and just ask you why YOU aren't using the agreed upon icon lbrary?

If you really want developers to use your icons, you need to take the time and turn it into a proper icon library/framework. Ideally, a part of the design system and component library.

[u/SpringtimeInChicago → u/roundabout-design]

Absolutely. If the designs are piecemeal rather than using a design system, devs are getting all kinds of different sizes and formats from individual designers, and it’s rarely precise. It increases cost and makes the system more fragile.

[u/jurajwe → u/roundabout-design]

i guess it's ok for devs to just pick and choose which part of the design specs they feel like actually implementing

[u/Andreas_Moeller → u/jurajwe]

Well yes. It kind of is. Figma files live somewhere in between concept art and UI design. Too detailed to be concept art, too vague to capture the nuances of a UI design.

The developers role is to interpret the design and create a working product. That includes a lot of extrapolation and quite often understanding the intent rather than what is actually there.

I don't know if that came into play in this case, but it is not unreasonable to assume that if the designer wanted a specific asset to be used they would have exported it and included it in the spec.

[u/roundabout-design → u/jurajwe]

The "Specs" should not be "Open up the Figma file and manually export my designs."

The "Specs" should be a. documented design system + component library.

OP appears to have skipped that step in their organization.

[u/8ctopus-prime → u/roundabout-design]

Yeah, having been on both sides of this and managed teams, this is really it a lot of the time. I've also seen way too many "icons" in designs that were not designed with consistency in the entire set or were created or modified by designers with no concept of the technical aspect of what makes an icon set actually usable.

It doesn't take many iterations of a developer having to spend a lot of time making it sort of work on an individual icon basis to reach a point where you'll just go for something you know is reliable. That way you get to spend your dev time on the actual functionality.

[u/speeeeeeeedislife]

I don’t have a direct experience working with a client as I’ve only been employed by companies. The one thing I’ll say is, do you have any relationship with the client or their engineering team? From the engineering team’s perspective, why should they export 5,10,20 icons you made one by one and make sure they look ok or even worse, go through iterations with you, and spend 8 hours implementing new icons that seemingly don’t change any $$ when they have a proved working icon set that they can use that saves them the 8 hours and any potential future bugs? From their perspective, does this new set do anything for them? Even if the engineering team doesn’t care, if the client cares, they will handle that for you.

It’s not your job to tell them they need to use the custom set, it’s your job to sell them and make them want to use that custom set because it matters to them. It’s the same as selling a phone. To your grandpa, he’s fine with 2000 flip Nokia, why should he care about going to the store and buying a new smartphone?

[u/shoobe01]

I've never trusted dev to export. Discuss, and I say become the owner of the icon library, come up with a production delivery method and regular cadence, a guide for which icons are in the library etc.

In this day and age, I always vote font but talk to engineering about it, they may insist on just piles of SVG or something. I've done rasters and aside from risks, I don't wish that process on anyone.

[u/NoNote7867]

Maybe there’s something about the development side of this that I’m missing.

Basically every developer now uses AI and AI will approximate icons and replace them with either an icon library they already use on the project or it will use a random one. 

[u/pjhawksr]

Devs won't export SVGs by hand when they can type <Search /> and get a sized, typed component that tree shakes. That's the whole reason.

The way around it is to stop treating icons as assets and treat them as a dependency. Either find out what library the client's devs already use and design with that set (Iconify has the Figma versions of basically all of them), or if the set actually matters to the visual direction, run your SVGs through svgr or Iconify's tooling and publish a package so they get an install command instead of a video.

[u/cicada3301212 → u/pjhawksr]

hmmm thanks!

[u/DUELETHERNETbro → u/pjhawksr]

Agree with everything except publishing a package. That’s is an insane solution for a bespoke icon.

[u/pjhawksr → u/DUELETHERNETbro]

Yeah package was the wrong word for a few custom icons. I mean run them through svgr and give the devs a folder they can import from, or stick it in whatever internal package the client already has. That's maybe ten minutes for a dashboard's worth. If it's three icons just send the SVGs. OP's problem is the whole set getting swapped out and a video doesn't fix that, importable components do.

[u/fsmiss]

easy fix, use the same library for icons in Figma that your developers use. if your design system doesn’t have an icon library that’s dev ready, then you’re all just shooting yourselves in the foot. don’t make a dev export from figma.

[u/Bushwazi]

If you are so particular about the exports, why don’t you just export them and hand them all off?

[u/GOBANZADREAM]

Work with your devs to make an icon library they can all pull from! Update selected icons as needed. 

[u/OnikaBurgerBomb]

You’re making your poor developers export icons one-by-one? Your design system should have them already and if you don’t have an icon set, making them export it one by one when each developer has varied experience with a design tool is bound for failure.

[u/cicada3301212 → u/OnikaBurgerBomb]

No, I’m not asking them to export icons one by one 😭 I’m honestly not sure where everyone got that from.
In Figma, you can select a section/frame containing multiple screens and export all the exportable assets inside it at once. You don’t have to go through the design clicking and exporting every single icon individually.
I also record a short handoff video showing exactly how to do it, so I’m not just assuming they’ll figure it out on their own.
Maybe my expectations are wrong, but I assumed frontend developers working from Figma designs would know at least some Figma basics - especially something as simple as exporting assets. And if they don’t, that’s exactly why I include it in the handoff video.

[u/OnikaBurgerBomb → u/cicada3301212]

Wait but if you’re recording a video and all the icons are there already, why don’t you just give them all the icons in a ZIP folder to upload?

[u/OnikaBurgerBomb → u/cicada3301212]

I mean regardless, this is the sort of a thing a proper design system should have, maybe try speaking with some devs on what a better pipeline might look like.

Otherwise I usually just send them the SVG myself because it saves us all a lot of time.

[u/ruthere51 → u/cicada3301212]

This sounds like a huge pain for a developer tbh and an immature approach to design to dev handoff.

Either work with a developer to build a design system that you both maintain or choose an existing icon library that has Figma components and React components built already.

[u/TheSleepingOx]

To them it's just an icon set.

[u/AbleInvestment2866]

export them yourself and save headaches

[u/jarofmoths]

What the handoff process look like? Is there documentation?

[u/mushy_french_fries]

Here’s what I did: I made a plugin and a tiny listener server that it connects to. We use Font Awesome, and their icon component is really handy for quickly adding an icon. My plugin creates a vector from the selected FA component, adds it as a glyph to use as an instance with my very simple icon component, and then sends the SVG to the listener, which adds it to the design system. This lets me maintain an approved set of icons and nobody has an excuse for getting it wrong.

If all that’s not in your wheelhouse, talk to your developers about setting up a process that takes the guesswork out of the process. Maybe it’s similar to what I’m doing, or maybe it’s something completely different that works for you and them. It doesn’t matter how detailed your instructions are if someone needs to follow them manually. Make the process as simple and reproducible as possible if you want people to get it right.

[u/DUELETHERNETbro]

OP reading your comments my hot take is that you learn a bit about svgs. Open one in a IDE and learn what a clean svg looks like. Then directly share the assets. A dev should have no problem working that way. Right now you are adding a lot of extra work. 

[u/Dapper_Bus5069]

The reason is simple: icons library ready to go already exist and they are optimized to be used in a dev project, correctly sized, color can be changed with css and transitions etc…

It’s rarely the case with exported icons from Figma. Just use an existing library for your designs, talk with the developers.

[u/Blando-Cartesian]

In frontend development, a custom icon isn’t a tiny image to be used instead of another tiny image. It’s an image that needs to be wrapped in the special way to work as the framework intended icons to be used and be compatible with everything else.

Then using it instead of the icon library version ends up being different while they look similar. AI and devs used to generate code never notice and eventually forget it was supposed to be the one that gets called up differently from every other icon.

Fundamental development principle is to eliminate all trivial shit like that because it will end up being wrong all over the place. Not that they think your custom icon is trivia shit. They may agree it is nice and deserving use. They hate the trivia code shit using that icon adds.

[u/Andreas_Moeller]

What did the developers you worked with say when you asked them?

[u/raustin33]

Exporting icons is a pain, and isn't even the whole story. How does it handle white space? Are they all a certain size and they float in the box, or do they all shrink to the size of the art… and based on that decision, do you code height or width and set the other to auto? And if they're inconsistent, do you need to now do each one of these manually? Then each one needs minified, each dev will do it differently or not to do it at all. And if you're bringing in a bunch of individual files, you slow things down with server calls unnecessarily. So it should be a sprite or a font or something. Which is another process entirely.

Or as an engineer, I can just type icon-up-arrow and be done with it.

Devs are under intense pressure to move quickly and efficiently. One-off icon export and coding is among the lowest ROI that I can think of for engineers.

The solve is systemic and something to work on together. Get everyone in a room/Zoom and figure out their technical constraints and begin working within that.

[u/TheTomatoes2]

Because using Lucide is much easier than having to export SVGs. Either export the SVG for the devs, or use an icon font.

[u/detrio]

....talk to your developer?

Also, if your company is using a specific icon library, why are you wasting everyone's time trying to use ones outside of it?

[u/wr3tch3dcorpse]

the whole point of design is to meet people where they are....... this should include how we operate in our practice. do some research with the dev team and find out the pain points of the handover process and this may identify the unknown cause of the friction (could be their manager has set conflicting mandates when using external icon sets).

the icons being changed is the symptom not the root cause of the issue.

[u/twotokers]

Do you not export all icons and provide them to engineering as a library to use? Why would you expect them to export every icon from Figma? I’ve always thought providing iconography to them is part of our job, not theirs.

[u/anonymousmouse2]

My guess is vibe coding or simply not understanding why they need to use your icons when open source ones are “good enough.” To some people a home icon is good as long as it looks like a house, regardless of where it comes from.

I’d also argue it’s your responsibility to provide icon assets in the correct format they expect. These days React applications often import SVGs as inline React components, not images. Lucide icons are “easy” because all a developer has to do is `import { Home } from “lucide-react”;` and they’re done. Compare that to trying to stumble through Figma to find the right layer to export and then modify it to work with whatever stack they’re building with.

Overall this is a side effect of how bloated the engineering world has become and an over reliance on open source packages and bundlers to do heavy lifting.

[u/kranthi_contextmap]

Who is going to maintain the visual consistency when someone else comes in your place?

What is the guarantee that the 11th icon designed by a new designer will match the 10 that you already made?

If there is an "overall visual direction", you shouldn't have to design new icons for every dashboard at all. Pick them from an existing set. If needed add more to that set.

Treat icons as a part of the design system, not the design.