Öppna vilket användargränssnitt som helst som kodats med AI, och du ser samma ikoner: rundade symboler ritade med två pixlars linje ur biblioteket lucide-react. De är standard i varje vibe-kodad demo och i många mallar. Lucide är ett bra bibliotek, men just därför har det blivit en kliché: när alla använder samma standard ser slutresultatet ut som gjort av AI.
Varför ser lucide-react ut som gjort av AI?
Problemet är inte Lucide i sig: det är ett omsorgsfullt ritat bibliotek med öppen källkod som härstammar från den klassiska Feather-serien. Problemet är enfalden. När v0, Bolt, Claude och otaliga startmallar använder samma standardbibliotek upprepas samma linjestil på tusentals webbplatser. Ögat läser den som ett hastigt ihopsatt projekt – precis som en violett gradient och rundade kort.
Att sticka ut kräver inte att du överger Lucide, utan ett medvetet val: välj ett bibliotek med egen karaktär och använd det konsekvent.
Ikonerna är en del av varumärket, inte en lös dekoration
En ikon är liten, men den återkommer på varje sida och i varje knapp, så dess stil påverkar uttrycket mer än en enskild bild. En väl vald ikonserie stöder typografin: en tunn linje passar lätt text, en tjock och fylld stil känns djärv.
Gratis eller betalt? Så fungerar licenserna
Kontrollera licensen innan du väljer en serie. De flesta ikonbibliotek av hög kvalitet har öppen källkod och är fria också för kommersiellt bruk.
Licensmodeller för ikonbibliotek
| Licenstyp | Vad den betyder | Exempel |
|---|---|---|
| Öppen källkod (MIT, Apache, ISC) | Fri för kommersiellt bruk, ingen skyldighet att nämna källan | Phosphor, Tabler, Heroicons, Lucide, Remix Icon |
| Namngivningsplikt (CC BY) | Gratis, men källan måste nämnas till exempel i sidfoten | Flaticon (gratisnivån), Noun Project, Solar |
| Freemium | En del gratis, ett bredare urval bakom betalvägg | Font Awesome, Streamline, Hugeicons |
| Kommersiell licens | Engångsavgift eller abonnemang, ingen gratisnivå | Nucleo, Streamlines premiumpaket |
Föredra serier med MIT-, Apache- eller ISC-licens i ett kommersiellt projekt: de kräver ingen namngivning. Om du väljer en serie som kräver namngivning, lägg till omnämnandet direkt.
De bästa alternativen med öppen källkod
De här serierna är gratis också för kommersiellt bruk, och de flesta har ett färdigt React-paket.
Ikonbibliotek med öppen källkod
| Bibliotek | Stil | Licens | Bäst för |
|---|---|---|---|
| Phosphor | Sex tjocklekar, även duotone | MIT | Personligt men vänligt uttryck; duotone skiljer sig från mängden |
| Tabler | Tunn linjeteckning, 5 800+ ikoner | MIT | Stil i Lucides anda, bredare urval |
| Heroicons | Outline- och fylld version | MIT | Tailwind-projekt; snyggt och neutralt |
| Remix Icon | Neutral systemstil, linje + fyllning | Apache 2.0 | Administrationspaneler och verktyg |
| Iconoir | Geometrisk linjeteckning | MIT | Friskt och igenkännbart uttryck |
| Material Symbols | Variabelt typsnitt: tjocklek, fyllning och storlek går att justera | Apache 2.0 | Bred täckning; Google- och Android-aktigt |
| Radix Icons | 15 × 15 pixlar, skarp | MIT | Kompakta användargränssnitt och små knappar |
| Solar | Bold duotone, rundad | CC BY 4.0 | Modernt, mjukt uttryck (kom ihåg namngivningen) |
Phosphor är den enskilt bästa rekommendationen för de flesta projekt: över 9 000 ikoner i sex tjocklekar, och duotone ger användargränssnittet en egen karaktär direkt. Det officiella React-paketet är @phosphor-icons/react, så bytet från lucide-react tar några minuter.
Iconoirs geometriska linje och Solars mjuka bold duotone bryter tydligast med den Feather-släktade stilen.
Betalda och freemium-bibliotek för att sticka ut
En betald serie är mer sällsynt och mer genomarbetad, så den är ofta det förnuftigaste valet när du vill ha ett genuint eget uttryck eller ett brett urval i en enhetlig stil.
Betalda och freemium-ikonbibliotek
| Bibliotek | Prissättning | Bäst för |
|---|---|---|
| Streamline | Freemium | Världens bredaste enhetliga bibliotek; tiotals stilar från samma källa |
| Nucleo | Betald + skrivbordsapp | Designerns dagliga verktyg, 30 000+ ikoner välorganiserade |
| Hugeicons | Freemium | 4 000 gratis linjeikoner och ett enormt pro-bibliotek, React-stöd |
| Untitled UI icons | Gratis + premium | 1 100+ ikoner som designats uttryckligen för användargränssnitt |
| Font Awesome Pro | Freemium | Bekant och omfattande; pro öppnar flera stilar och varumärkeslogor |
| Icons8 | Freemium | Enhetliga ikoner och även 3D-stil; egen Pichon-app |
| Iconscout | Marketplace, freemium | Ikoner, illustrationer och Lottie-animationer från samma ställe |
Streamline och Nucleo är de starkaste valen när du behöver en enhetlig stil genom ett stort projekt. Hugeicons och Untitled UI är en bra mellanform: en gratisnivå av hög kvalitet som du kan utvidga till den betalda.
Animerade ikoner
En ikon i rörelse fäster uppmärksamheten på rätt ställe: laddningens tillstånd, en lyckad sparning, en meny som öppnas. Animerade serier bygger oftast på Lottie-formatet, som fungerar i React via biblioteket lottie-react. Använd dem sparsamt, för ständig rörelse tröttar ut ögat.
- Lordicon – freemium; tusentals färdigt animerade ikoner där färger och rörelse går att justera
- useAnimations – en gratis Lottie-baserad serie för de vanligaste mikrointeraktionerna
- Lottieflow och Iconscout Lottie – nedladdningsbara Lottie-filer som fungerar direkt i React
Iconify och react-icons: vilket bibliotek som helst med en enda komponent
Det bästa tekniska tipset är Iconify: den samlar över 200 000 ikoner och 150 serier bakom samma gränssnitt. Du kan använda Phosphor, Solar, Tabler eller vilken annan serie som helst med en enda komponent (@iconify/react). Ikonerna laddas vid behov, så ingen onödig barlast följer med. Serierna behåller sina egna licenser.
react-icons samlar tiotals populära serier i ett enda npm-paket, och importen följer serien: Phosphors ikon kommer från react-icons/pi. Båda lösningarna rensar bort oanvända ikoner (tree shaking). För att bläddra använder du verktyget Icônes, som visar alla Iconifys serier i samma vy.
Så väljer du ikonbibliotek
- Täckning: finns alla ikoner du behöver? En ofullständig serie tvingar dig att blanda stilar.
- En familj: välj ett bibliotek och håll dig till det genom hela användargränssnittet.
- Linjens tjocklek och rundning: anpassa ikonerna till typografin och varumärket.
- Licens: kontrollera kommersiellt bruk och eventuell namngivningsplikt före publiceringen.
- Teknisk lämplighet: React-paket eller Iconify?
- Storlek: ta med bara de ikoner du använder, inte hela typsnittet.
Praktiska tips för att undvika AI-slop
- Byt standarden: ett byte från lucide-react till Phosphors duotone eller till Solar förändrar uttrycket direkt.
- Justera linjens tjocklek efter textens tjocklek – en tunn ikon vid sidan av en fet rubrik ser lösryckt ut.
- Rita några nyckelikoner själv, till exempel för tjänsterna eller lyften på framsidan.
Ikonerna är bara ett av AI:s många handavtryck. Det här är första delen i serien AI-slopens anatomi; i de följande delarna behandlar vi typografi, färger och andra standardval som avslöjar en färdig mall. Vi på Visio Design väljer till varje projekt en ikonserie som passar varumärket och ritar egna när det behövs – så att slutresultatet ser ut som ni och inte som en standard.
Vill du ha ett gränssnitt som inte ser AI-gjort ut?
Vi designar webbplatser och gränssnitt med ett eget uttryck, ikonerna inkluderade. Berätta om ditt projekt och få en offert inom 24 timmar.