Icons for Lovable, v0, Bolt and Cursor: which icon library should your AI use?

On this page 9 sections

Most AI app builders reach for Lucide icons, because v0 and many other tools build on shadcn/ui, and Lucide is shadcn/ui’s default icon set. That is a fine start. The trouble begins when the AI guesses an icon name from memory and gets it wrong. Give it a real icon list to check (one line in its settings, an MCP server or an llms.txt link) and it stops guessing.

This guide is for anyone “vibe coding”, which means building an app by describing it to an AI tool such as Lovable, v0, Bolt or Cursor instead of writing every line yourself. You do not need to read code to follow it. We checked each tool’s own documentation in November 2026, and where a tool does not say something, we say so instead of guessing. (Want the background on why chat assistants make names up? Our guide to icons from AI assistants covers that in depth.)

Which icon library do Lovable, v0, Bolt and Cursor use?

Here is what each tool’s own docs say, as of November 2026. An icon library is simply a collection of matching icons with fixed names that your app installs like any other building block.

Default icons in popular AI app builders (from each tool’s docs, checked November 2026)

Tool	What its docs say	Icons you will usually find	Where to set your own
v0 (Vercel)	“v0 uses Next.js, React, TypeScript, Tailwind CSS, and shadcn/ui.”	lucide-react, the shadcn/ui default	Instructions (the + menu in the prompt bar)
Lovable	A React stack (TanStack Start for new apps since May 2026, React + Vite before). No icon library is named.	Check package.json	Project settings > Instructions
Bolt	No default icon library is named in its help centre.	Check package.json	Knowledge (account, project or team)
Cursor	An editor, not a template: it uses what your project already has.	Whatever is installed	AGENTS.md or .cursor/rules
Claude Code and other coding agents	Same as Cursor: they follow your project.	Whatever is installed	AGENTS.md / CLAUDE.md, or the agent skill

The pattern is simple. Tools that start from shadcn/ui inherit Lucide. Tools that work inside your own code use whatever is already there. And when there is nothing there yet, the AI picks a library by itself, without telling you, so it pays to name the one you want.

Why do AI tools make up icon names that do not exist?

An AI model writes the most likely next words. It does not open your icon library and read the list. So when it needs a “delete” icon, it writes a name that sounds right. Often that name exists. Sometimes it belongs to a different library, or to an older version of the right one.

Names really do drift. Lucide, for example, renamed its home icon to house and now keeps home only as a deprecated (old, on its way out) alias. A model that learned from older code will happily keep writing the old name. Here are a few everyday ideas, with the real names on each side:

with icons · LineLucide · Line

homehouse

settingssettings

trashtrash-2

shopping-cartshopping-cart

searchsearch

bellbell

What breaks when an AI guesses an icon name?

It depends on how the icons are added, but none of it is fun:

• The build fails. In a React app, importing an icon that the package does not have is an error. The builder shows a red message and the preview stops updating.
• The page goes blank. Sometimes the app builds but crashes when that screen loads, and you see a white page instead of your app.
• An empty gap. With class-based or image-based icons, a wrong name usually fails quietly: the button is there, the icon is not.
• The wrong picture. The name exists but means something else, so a “share” button shows an upload arrow.
• A mixed look. The AI fixes the error by pulling in a second library, and now two styles sit side by side.

Each fix costs another prompt, and on many builders every prompt uses up credits. A real list prevents the loop entirely.

How do you give your AI builder a real icon set?

There are five ways, from “paste one sentence” to “connect a tool”. The examples use with icons, a free MIT library of 1000 icons in 34 styles (34,000 SVGs), because it was built for this: every name is searchable by AI. The first idea works with any library.

1. 1
   A one-line instruction

   Name one library, ask for real names, and set the style. It works in every tool and takes ten seconds.

2. 2
   The MCP server

   MCP (Model Context Protocol) is an open standard that lets an AI tool call outside tools. Ours lets the AI search the real icon list. Remote: https://withicons.com/mcp, no key. Local: npx -y @withicons/mcp.

3. 3
   npx withicons init

   One command in your project that adds the MCP server and the agent skill to Claude Code, Codex, Cursor, OpenCode, VS Code and Windsurf. Add --dry-run to see the changes first.

4. 4
   llms.txt

   A plain-text summary written for AI models, at https://withicons.com/llms.txt. Paste the link into any chat that can read web pages.

5. 5
   The agent skill

   A short instruction file the AI reads before it adds icons: which package, which style, how to name things and how to label buttons. It lives at https://withicons.com/skill/SKILL.md.

1000

real names to search

34

styles per icon

0

accounts or API keys

1

line to get started

Copy-paste prompts for each tool

Swap the style if you like. Line is the calm outline default for buttons and menus, solid suits the active tab, and the creative styles are for big, decorative spots.

Lovable

Open Project settings (Ctrl+. or ⌘. on a Mac) and paste this into the Instructions tab, so it applies to every request. Lovable can also add custom MCP servers on all plans: open Connectors, add an MCP server with the URL https://withicons.com/mcp and no authentication.

Icons: use the "with icons" library (@withicons/react, MIT).
Read https://withicons.com/skill/SKILL.md before adding icons.
Look names up at https://withicons.com/api/search?q=<words>;
never invent an icon name. Line style for UI, solid for active states.
Icon-only buttons need an aria-label.

v0

Open the + menu in the prompt bar, choose New Instruction, paste this and keep it ticked. Saved instructions follow you across chats and projects.

For icons in my pages, use @withicons/react (leave the icons
inside the shadcn/ui components as they are).
Check every name against https://withicons.com/llms.txt first.
Use the line style, and the solid style for the selected item.
If no icon fits, tell me instead of making a name up.

Bolt

Add this to Project knowledge (or Account knowledge, to cover every project). Bolt can also connect custom MCP servers under Connectors; its docs list API-key and sign-in options, and ours needs neither, so if the connector will not save, the knowledge line alone still does the job.

Icon library: with icons (npm i @withicons/react).
Before using an icon, confirm the name exists at
https://withicons.com/icons/<name>.html. Never guess names.
One style per area: line for navigation, duo for feature cards.

Cursor, Claude Code and other coding agents

Run one command in your project folder. It adds the skill and the MCP server for every AI tool it finds, keeps your other settings, and is safe to run again.

npx withicons init

Prefer to do it yourself? Cursor reads project rules from .cursor/rules and also supports a plain AGENTS.md file. The exact config for each tool is on our with icons for AI page. Then ask in plain words:

Use the withicons MCP server. Swap the icons in the sidebar for
with icons (line style; solid for the active item). Look up each name
with search_icons before importing it. Keep lucide-react elsewhere.

Should you keep Lucide or switch?

Honestly, Lucide is a good default. It is a well-drawn outline set, ISC licensed, with official packages for most frameworks, and shadcn/ui is built around it. If your app looks right and you only need one outline style, keep it, and just add the “look names up” line so the AI stops guessing.

Lucide or with icons in an AI-built app

You want…	Keep Lucide	Try with icons
One clean outline style for an app	Great fit	Line style
Filled and tinted versions of the same icons	Outline only	Solid and duo, same names
Big, decorative icons for a landing page	Not its focus	31 creative styles
An AI that searches the real list	llms.txt	MCP server, skill, llms.txt
The same icons in slides and docs	SVG download	Copy image, PNG and SVG
No change at all to a working app	Nothing to do	Small rename map

Switching is mostly a find-and-replace. Both libraries give you one React component per icon with the same size, color and strokeWidth props, and only a few names differ (House becomes Home, X becomes Close). Our Lucide alternative page has the full name map, and with icons vs Lucide compares the two in plain English.

Line

Solid

Duo

Gloss

Glass

Clay

Kawaii

How do you keep AI-built icons consistent?

AI builders add screens fast, and each new screen is a fresh chance for the look to drift. Three rules keep it tidy, and they belong in your instructions, not just in one prompt:

• One library. Name it, and tell the AI not to install a second one.
• One style per area. Line in the menu, solid for the selected item, one creative style for the hero. Not five styles on one screen.
• Labels on icon-only buttons. A trash can with no text needs an accessible name (an aria-label) so screen readers can say “Delete”.

botsearchcheck-circlecodelayerssparkles

For more on matching icons across a product, read how to keep icons consistent. For React projects without an AI builder, the free icons for React page has the install steps.

The bottom line

Your AI app builder probably already uses Lucide, and that is fine. The real problem is guessing, not the library. Tell the tool which icon set to use, give it a way to check names (an instruction, the MCP server, npx withicons init, llms.txt or the skill), and keep one style per area. If you want more than one outline style, with icons gives your AI 1000 searchable icons in 34 styles, free under MIT.

Frequently asked questions

What icon library does Lovable use?

Lovable’s docs describe a React stack but do not name a default icon library, so open your project’s package.json (or ask Lovable) to see which one is installed. You can choose your own in Project settings > Instructions, for example “use the with icons library and look names up before using them”.

What icons does v0 use?

v0 says it uses shadcn/ui as its default component system, and shadcn/ui’s default icon set is Lucide (the lucide-react package). You can ask v0 for another library at any time, or save the request as an Instruction so it applies to every chat.

Why does my AI app builder use icons that do not exist?

Language models predict a likely-sounding name instead of checking a list. Icon names also change between libraries and versions (Lucide renamed home to house, for example). Give the tool a source to check, such as an MCP server or an llms.txt link, and the guessing stops.

Should I replace Lucide in my AI-built app?

Not if it already looks the way you want. Lucide is a well-made, ISC-licensed outline set. Switch when you need more than one look (filled, tinted, 3D or playful styles), icons that also work in slides and docs, or a library your AI can search through MCP.

How do I connect the with icons MCP server to Cursor or Claude Code?

Run npx withicons init in your project. It finds Cursor, Claude Code, Codex, VS Code, Windsurf and OpenCode, adds the MCP server and the agent skill, and --dry-run shows every change first. You can also add the remote server https://withicons.com/mcp by hand. No account or key is needed.

Can I use with icons in Lovable, v0 and Bolt without coding?

Yes. Paste one line into the tool’s instructions or knowledge settings, or ask in chat: “Use the with icons library. Install @withicons/react and look up names at withicons.com before using them.” The AI writes the code for you.

Sources and notes

1. v0 docs: FAQs (“v0 uses Next.js, React, TypeScript, Tailwind CSS, and shadcn/ui”)
2. v0 docs: Design systems (shadcn/ui as the default component system)
3. v0 docs: Instructions
4. shadcn/ui changelog, November 2024: Lucide becomes the default icon set
5. Lovable docs: FAQ (tech stack)
6. Lovable docs: Project settings and Instructions
7. Lovable docs: Custom MCP servers
8. Bolt help: Prompting effectively (Knowledge)
9. Bolt help: Connect an MCP server
10. Cursor docs: Rules and AGENTS.md
11. Lucide on GitHub: house.json (“home” kept as a deprecated alias)
12. with icons for AI: MCP server, skill, llms.txt
13. with icons llms.txt

Facts about other icon sets were checked against their official sites in November 2026. Libraries change, so check the links above for the latest numbers.