Renan Oliveira
10
min read
Your product works. The demo goes well. But then a prospect says it feels 'template-y' and no one can explain why. Check your icons. Rounded tiles above every feature card, sparkles on AI buttons, emoji in the sidebar, and the same default outline set from your AI tool. Each icon seems minor, but together they signal nobody made a real decision. Buyers notice and start to question your security and roadmap. The fix: give every icon a purpose, cut the rest, and document your choices. Here are seven icon patterns to watch for, a four-job test, a scorecard, and a spec you can use.
What is the AI slop icon problem?
The AI slop icon problem is when default, decorative, and inconsistent icons pile up in your product. AI tools and templates add them automatically, and nobody chooses or owns them. Users notice.
It starts with the tools. Lovable, v0, and Claude Code all ship with the same defaults: Inter, shadcn components, Lucide icons, and Tailwind spacing. The model hasn't made a single design decision yet. SaaStr points out that if you’ve seen one AI-generated site, you’ve seen them all. The same Lucide icons are a dead giveaway.
There’s data behind this. In April 2026, developer Adrian Krebs ran automated checks on Show HN landing pages for common AI design patterns. About one in five used these patterns heavily. Two of the most common: feature cards all topped with the same icon, and navigation built from emoji.
Krebs is right. Before AI, much of the web looked like Bootstrap. Generic design isn’t new. The difference now is speed. One prompt generates 50 icon decisions per minute, and nobody reviews them.
Why icons make a product look cheap
Icons make your product look cheap when they repeat. One default can show up everywhere: navigation, tables, buttons, empty states. Every screen sends the same message: nobody chose this.
That message drops fast. In a study published in Behavior & Information Technology, Carleton University researchers found that people judged a web page’s visual appeal within 50 milliseconds, and those snap judgments held up when people looked longer. The Stanford Web Credibility Project found that 46.1% of consumers judged a site’s credibility partly on its overall visual design, including layout, typography and color. Both studies are old, and neither is about icons. They show something that hasn’t changed: people decide whether to trust what they see before they read a word.
In B2B, this matters. When your homepage looks like every other AI-built product, buyers wonder what else was generated without review. They start to question your permissions model, data handling, and feature stability. Nielsen Norman Group reports that as AI fatigue spreads, a handmade look is now a trust signal. It shows someone cared.
Most 'de-slop' guides miss this. Making icons prettier doesn’t help much. A 2026 University of Jyväskylä study found that better-looking icons don’t improve usability once other factors are controlled. A glossy 3D icon set won’t fix it. Fewer icons, clear meanings, visible labels, and one consistent system will.
The 7 icon tells
These are the seven icon patterns we see most often in AI-built SaaS products, roughly in the order a buyer notices them.
1. An icon tile above every feature card
What you’ll notice: a feature grid of three or six cards, each with a small line icon inside a rounded square or circle, then a heading and two lines of copy. The open-source Impeccable rule set calls this the universal AI feature card template because every generator outputs exactly that shape.
Why it costs you: the feature section is where visitors decide whether you’re different. Tiles make every feature look equally important, and the icon serves as evidence. A lightning bolt claims “fast.” A cropped screenshot of a report loading in two seconds proves it.
The fix: replace decorative icons with proof, such as a cropped UI screenshot, a real number, or a before-and-after. If an icon stays, remove its container and set it inline with the heading. Brief it like this: “Feature section shows three items at most. Each uses a real product crop at 2x. No icon containers. Card size reflects feature significance.”
How to measure it: scroll depth into the feature section, clicks from it, and homepage-to-signup rate in an A/B test.
Most common mistake: swapping the line icons for expensive 3D icons in the same tiles. You still have the template, just at a higher cost.
2. Sparkles on everything AI (and some things that aren’t)
What you’ll notice: the same sparkle on Summarize, Rewrite, Suggest tags and a “New” badge.
Why it costs you: Nielsen Norman Group’s research on the sparkles icon found multiple interpretations of its meaning. When users can’t predict what a button will do, they leave it alone, and the AI feature you paid to build goes unused. Google’s own research found that users recognize its Sparkle as the AI sign in Google products. That works for a company that uses a single mark consistently across billions of sessions. Your product doesn’t have that history to lean on.
The fix: use one AI mark, only for AI actions and AI-produced content, and always pair it with a verb label: “Draft reply,” “Summarize call,” “Suggest 5 tags.” Before anything is overwritten, show what will change.
How to measure it: AI feature discovery (the share of weekly active users who trigger each AI action) and accept rate (outputs used as-is or lightly edited).
Most common mistake: dropping the label to save toolbar space, which brings back the ambiguity you just fixed.
Field note: in our published FuseAI case study, AI work was happening under the surface, but sales teams couldn’t see it. We redesigned the interface so every AI-driven screen stated what the AI was doing, why it mattered, and what to do next.
3. Emoji doing an icon’s job
What you’ll notice: 🚀 Launch and 📊 Analytics in the sidebar, ✅ in the pricing table, 🔥 in section titles.
Why it costs you: emojis look different on every operating system, carry a tone you didn’t choose (a flame on a compliance dashboard), and get read aloud by screen readers by name. Enterprise buyers and accessibility evaluation reviewers notice, and the product looks like a side project rather than a vendor.
The fix: remove most of them. Replace only the ones doing real navigation or status work with icons from your set. Emojis are fine within user-generated content and in one celebratory moment, such as finishing setup.
How to measure it: count emojis in UI strings (a regex search across your copy files takes minutes). The target is set to zero for navigation, tables, and buttons.
Most common mistake: replacing every emoji with an icon one-for-one. Most of them should go.
4. One library, zero decisions
What you’ll notice: every icon is the same size, stroke, and gray, whether it’s primary navigation or a tiny row action in a table. One community checklist calls this “the all-icons icon set”.
Why it costs you: with no hierarchy, the eye can’t find the primary action, and the product looks exactly like every other shadcn app in the category.
To be fair to the library: Lucide isn’t the problem. A well-drawn open-source set beats a generated one almost every time. The problem is that it ships its defaults untouched.
The fix: decide on four things: a size scale (16px for inline text and in tables, 20px for buttons, 24px for navigation). One stroke weight, or two at most, matched to your type weight. Color roles (default, muted, interactive, destructive). A corner style that fits your border radius. Lucide supports stroke width as a prop, so most of this is a config change rather than a redraw.
How to measure it: count distinct icon sizes and stroke values in the codebase. Three sizes or fewer is healthy.
Most common mistake: switching to another popular library and calling it a rebrand.
5. The Frankenstein set
What you’ll notice: Lucide in the navigation, Heroicons in settings, a Font Awesome glyph in the footer, and a few AI-generated SVGs for “custom” concepts with wobbly lines. When Icons8 tested AI SVG icon generators in a real design, they found that even after editing, stroke thickness varied and some shapes were too scrappy.
Why it costs you: mixed sets read as an unfinished product. Users can’t name the cause, but they feel it.
The fix: choose one base family. Draw or source missing concepts on the same grid, with the same stroke and corners. Google’s Material guidelines are a useful reference: system icons are laid out on a 24dp grid with a consistent 2dp stroke around curves and angles. Treat AI-generated icons as sketches and rebuild them on your grid before they ship.
How to measure it: count icon import sources. The target is one, plus third-party brand logos.
Most common mistake: cleaning it up once without writing the rule down, so it drifts back within a few sprints.
Field note: in our GoAudience case study, colors were slightly off between screens and buttons behaved differently depending on where you clicked, which made a strong product look unfinished. The fix was one shared set of color, spacing, and interaction standards used everywhere, from onboarding to billing.
6. Mystery icons with no labels
What you’ll notice: an icon-only sidebar or toolbar, with labels that appear only on hover.
Why it costs you: Nielsen Norman Group says labels should always be visible. Hover-only labels add friction and don’t work on touch devices. If users can’t find features, they won’t use them, and you’ll get more support tickets.
The fix: Always label navigation icons. Use icon-only buttons just for universal actions like search, close, or more. Add a tooltip and aria-label to each.
How to measure it: Track adoption for each navigation item and count tickets asking “where do I find…”.
Most common mistake: Collapsing the sidebar to icons by default to make screenshots look cleaner.
7. Metaphors that fail the swap test
What you’ll notice: a shield for “secure,” a bolt for “fast,” a rocket for “launch,” a brain for “AI,” and a globe for “integrations.”
Why it costs you: Run the swap test. Put a competitor’s logo on your homepage. If the icons still fit, they don’t say anything unique about you. When everything looks the same, buyers choose based on what they know or on price.
The fix: Design 5 to 10 signature icons for the nouns your product has only. For a revenue tool, that could be “forecast scenario” and “deal room,” not generic ones like “chart” or “folder.” Draw them on your grid. If an icon is standing in for a claim, show the real UI instead.
How to measure it: Run a five-second test. Show your homepage for 5 seconds, then ask what the product does and who it’s for. Listen for prospects using your language on sales calls.
Most common mistake: Paying for custom illustrations of generic ideas while your core product objects still use stock icons.
Field note: With Fambot, the technology was real, but the mascot read as generic AI, and the app felt vibe-coded. The fix wasn’t a new palette. It was rebuilding the character, the product, and the story around what families needed.
The Icon Job Test
Every icon in your product should do one of four jobs. If it can’t name its job, cut it. Run this test before you redraw anything. Cutting icons costs nothing and usually solves more than redrawing.
Job | The question it answers | Keep it if… | Label rule | Default treatment |
Find | “Where do I go?” | It marks a navigation destination users return to | Always visible | 20 to 24px, muted until active |
Act | “What happens if I click?” | It triggers a command, and the meaning is near-universal or labeled | Label, or tooltip plus | 16 to 20px, inherits button color |
Status | “What state is this in?” | It shows state that changes (synced, failed, needs review) | Paired with text the first time it appears | 16px, semantic color only |
Brand | “Who made this?” | It’s a signature icon or illustration you own and use on purpose | n/a | Your grid, your metaphors, used sparingly |
Anything that breaks up text, fills an empty corner of a card, or decorates a heading fails the test. Delete it or replace it with real content.
Score your product: the icon slop scorecard
Score your three highest-traffic screens: the homepage, the first screen after signup, and your main sales demo screen. For each check, give 0 (fails), 1 (partly), or 2 (passes).
# | Check | Passing looks like |
1 | Every icon has a job | No icon fails the Icon Job Test |
2 | Labels | Navigation labels are always visible; icon-only buttons are universal and have tooltips |
3 | One source | One base icon family, plus brand logos |
4 | Size scale | Three sizes or fewer, used by role |
5 | Stroke and corners | One stroke weight (two at most) that matches your type and radius |
6 | AI mark | One mark, one meaning, always with a verb label |
7 | Emoji | None in navigation, tables, buttons or headers |
8 | Swap test | Core product nouns have signature icons or real UI, not generic metaphors |
How to read your score (out of 16):
13-16: your icons aren’t the problem. Look at copy, onboarding, or positioning instead.
8-12: This is a one-sprint fix. Write the spec below, cut decoration, and relabel navigation.
0-7: The icons are a symptom of a missing design system. Fix the system first, or the slop will return with the next prompt.
These bands are working thresholds for prioritizing. They’re not an industry benchmark.
How to fix it: an icon spec for designers and AI agents
The lasting fix is a short written spec that every designer, engineer, and AI agent uses. Without it, the model falls back to defaults on the next screen.
Inventory what you have. Take a screenshot of every icon on your top three screens. Then search the codebase for icon imports by library (e.g.,
lucide-react,@heroicons)or inline SVGs. You’ll often find icon sources nobody remembers adding.Run the Icon Job Test and start by deleting decorative icons. It’s the cheapest change you can make, and the one users notice most.
Pick one base icon family and customize it. Set the size scale, stroke, corners, and color roles. Keep the library but change the defaults.
Draw your signature icons. List the 5 to 10 nouns unique to your product and design them on your grid.
Fix the AI mark. Choose one mark, define exactly what it means, and add a verb label everywhere it appears.
Write it down where the agent will read it. Put the spec in your DESIGN.md or a context file. Add a lint or review to verify off-system icons. Our guide to building a design system that keeps AI-generated UIs consistent covers the rest.
Here’s a starting spec to paste into DESIGN.md and adapt:
Worked example: an AI-built revenue forecasting tool
This is an illustrative composite of patterns that recur in AI-built B2B products, not a specific client.
The situation: A Series A forecasting product, built fast with an AI coding tool. Demos convert, but prospects call it “like the others,” and the AI forecast feature gets low adoption.
Surface | Before | After | Why |
Homepage features | Six cards, each with a tinted icon tile (bolt, shield, brain, globe, chart, rocket) | Three items, each with a cropped screenshot of the real forecast view and one number | Proof instead of decoration; passes the swap test |
Sidebar | Collapsed, icon-only, emoji for “Deals 🤝” and “Forecast 🔮” | Expanded by default, labeled, one icon family at 20px | Findability, enterprise polish |
AI action | Sparkle button with no label in the deal view | AI mark plus “Explain this forecast” label, with a preview panel | Users can predict the outcome |
Table row actions | Five icon-only actions at 24px, same weight as navigation | Two 16px icons (edit, more) plus an overflow menu | Hierarchy; the row data wins |
Brand | Generic chart and folder icons for core objects | Signature icons for “scenario” and “deal room” | The product’s own nouns become recognizable |
What to track after shipping: Homepage-to-signup rate, AI forecast discovery and accept rate, and whether prospects stop calling the product “like the others” on sales calls.
When fixing icons won’t move your numbers
Icons signal credibility, but they’re not a growth strategy. Sometimes the real problem is elsewhere, and polishing glyphs delays the real fix.
Positioning: If prospects don’t get what you do or who it’s for, unique icons won’t help. Fix your headline and category first.
Pricing and packaging: If users activate but churn at the paywall, the problem is your offer.
Traffic quality: If most signups aren’t your ideal customers, conversion rates will remain low no matter how polished the product looks.
A real product gap: If interviews keep pointing to the same missing feature, build it.
Pre-product-market fit: As Krebs notes, fancy design never validates a business idea. If you’re testing demand with ten design partners, ship the defaults and spend your time on interviews.
Developer tools and internal admin panels: Some audiences expect a plain, standard UI and see heavy branding as noise. Consistency and labels still matter. Signature icons matter less.
What to decide this week
Run the scorecard on your homepage, your first post-signup screen, and your main demo screen. Make one decision based on the score. If you score 8 or higher, book a sprint to cut decoration, relabel navigation, and write the icon spec. If you score under 8, the real decision is who owns the design system. Without an owner, every new AI-generated screen brings the slop back.
Foundey’s embedded SaaS product design team works inside your tools and sprints. We turn AI-built products into ones that look chosen, starting with a system your team and AI tools can follow. If you want an outside read first, our 5-day UX audit evaluates your product against criteria like these and provides a prioritized list of fixes.
FAQ
Why do all AI-generated apps look the same?
AI builders start from the same defaults, usually Inter, shadcn components, Lucide icons, and Tailwind spacing, and the model replicates the most common patterns from its training data. Unless someone gives it specific design rules, every product ends up with the same average: gradient heroes, three-card feature grids with icon tiles, and sparkles on AI buttons. The fix is a written design spec the model must follow, not a better prompt adjective like “modern.”
Is it bad to use Lucide icons?
No. Lucide is a well-made open-source set, and it’s usually better than icons generated from scratch. The problem is that it ships its defaults untouched: one size, one stroke, and one color everywhere, plus decorative tiles. Customize the stroke, set a three-step size scale, assign color roles, and add a few signature icons for your core product objects. Your product then looks chosen rather than generated.
Should I use the sparkle icon for AI features?
You can, but never by itself. Nielsen Norman Group found people interpret the sparkles icon in widely different ways. Pick one AI mark, use it only for AI actions and AI-created content, and always pair it with a verb label such as “Summarize call.” If users can’t predict what the button does, they won’t press it, and your AI feature’s adoption will suffer.
Can people tell if icons are AI-generated?
Usually not from a single icon. What people notice is the pattern around the icons: the same tile above every card, mixed stroke weights between screens, emoji in navigation, and metaphors that could sit on any competitor’s site. Unedited AI-generated SVGs also tend to have uneven strokes and messy shapes. Users rarely name the cause, but they describe the product as generic or unfinished.
Do icons need text labels?
For navigation, yes, and they should always be visible. Nielsen Norman Group’s icon usability research recommends visible labels because few icons are universally understood, and hover-only labels fail on touch devices and add effort. Icon-only buttons are fine for near-universal actions such as search, close, and more, as long as each one has a tooltip and an accessible name for screen readers.
How do I make my AI-built app look less generic?
Cut clutter first: ditch decorative icons and emoji. Use clear labels for directing and swap icon-heavy feature cards for real product screenshots. Write a quick design spec for icons, type, color, and spacing, and make sure your AI tools can access it. Add a review step. Brand work comes later. Consistency and restraint drive results.
Cursor vs Figma Make vs Lovable: Which Vibe Coding Tool Fits Your Team in 2026
Renan Oliveira
10
min read
Why AI Generated Empty States Are the Worst Part of Modern SaaS (and How to Fix Them)
Renan Oliveira
13
min read
AI Slop vs Craft: 6 Side by Side Redesigns of AI Built SaaS Screens
Renan Oliveira
12
min read
