ikoner har en viktig roll för att ge dig det första intrycket av webbplatsen eller applikationsgränssnittet. Men det tar mycket tid och pengar att utveckla dem från början., Med hjälp av ikoner på din webbplats kan du effektivt kommunicera med dina besökare: de ökar läsbarheten, markera viktigt innehåll, återupprätta funktionalitet eller funktioner och förbättra designen. Därför är det värt att uppmärksamma färdiga bästa ikonpaket.
När det gäller ikondesign är detta ett bra sätt att visa upp designer kvalifikationer., En söt, fin ikon pack är en perfekt presentation av designerns arbete och ett kraftfullt instrument för att bygga upp ditt rykte online.
Här är några stora fördelar med att använda ikoner i ditt nästa UX designprojekt.
- ikoner hjälper till att öka webbplatsen eller appläsbarheten.
- välgjorda ikoner hjälper till att minska textvolymen. Använda ikoner gör ditt meddelande förståeligt utan text.
- ikoner kan lägga till anpassning till din produkt.
- ikoner kan vara en bra utgångspunkt för att lära känna produkten.,
- sist men inte minst: en av de viktigaste funktionerna i ikoner är att hjälpa användare intuitivt förstå programmet både vid första bekantskap och under efterföljande användning.
i den här artikeln hittar du en samling av några av de bästa ikonpaket du kan använda på din webbplats eller ditt företag, även om du inte är en kreativ artist. De produkter som presenteras i denna artikel kan användas inte bara på vanliga webbplatser och i grundläggande fall, men också i mer komplexa och specialiserade.
vi delar upp produkterna i flera kategorier för din lätthet., Innan beskrivningar kommer du att se den kategori som denna produkt tillhör.
- gratis ikonuppsättningar.
- marknadsplatser. Marknaden innehåller ikoner från olika tillverkare. Här hittar du både billiga och dyra, samt bra och lågkvalitativa produkter.
- ikonuppsättningar för materialdesign och platta ikonuppsättningar.
- CSS-ikonuppsättningar. CSS ikoner görs med-gissa vad-CSS. För att använda dem, kopiera bara koden till din sida.
- ikoner teckensnitt. Enligt Pluralsight är ikonteckensnitt faktiska teckensnitt som innehåller symboler och glyfer istället för bokstäver eller siffror., De är populära för webbdesigners eftersom du kan styla dem med CSS på samma sätt som vanlig text. Ikon typsnitt behandlas som text av webbläsare, så du måste normalisera dem för att undvika text anti-aliasing frågor, och stöds i nästan alla webbläsare.
- SVG ikoner. Scalable Vector Graphics (SVG) är ett XML-baserat vektorgrafikformat som kan skala till vilken storlek som helst utan att förlora klarhet. De kan visas genom att använda CSS, objekttaggar, bildtaggar eller inlined direkt i din HTML.
- Glyph och piktogramikonuppsättningar.,
Flaticon
Flaticon innehåller helt redigerbara vektorer och kan användas för både personliga och kommersiella projekt. FlatIcon har mer än 2,3 miljoner vektor ikoner grupperade i 51202 förpackningar.
produkten har Adobe-tillägg som låter dig enkelt importera ikoner i Photoshop, Illustrator och After Effects., Om du vill använda en webb typsnitt i stället för statiska filer för dina ikoner, kommer FlatIcon ta hand om formatkonvertering och generera en webb typsnitt redo att använda. Du kan också anpassa nedladdade ikoner.
viktiga fakta:
- över 90.000 ikoner;
- SVG, EPS, PSD och PNG format;
- ikon typsnitt;
- Adobe förlängning för CC suite;
- Linkshare licens med premium alternativ; och
- nya ikon förpackningar läggs varje månad.,
en Premiumabonnemang med FlatIcon ger dig fullständiga licensrättigheter, tillgång till exklusivt innehåll, inga annonser, macOS-appen och Adobe-tillägg samt möjligheten att skapa obegränsade samlingar.,
Jam Icons
Web-site: https://jam-icons.com/
Format and Type: SVG, CSS
Price and License: Free, MIT
Jam icons are a set of 896 handcrafted icons. This icon pack comes with both SVG and font versions. The icons can be used as SVG files in your web, print or application development projects., Ikonerna kan också användas som ett teckensnitt med de givna CSS-stilmallarna. Det finns 16px, 24px och 32px storlekar. Du kan också välja att fylla eller stroke ikoner.
Fontisto Icon Pack
webbplats: https://fontisto.com/
Format och typ: CSS
pris och Licens: Gratis, MIT
fontisto är en vektor ikoner pack., Ikoner kan anpassas direkt: storlek, färg, skugga och allt som kan göras med kraften i CSS. Produkten kräver inte Javascript. Fontisto ikoner är vektorer, vilket innebär att de kommer att se bra ut på högupplösta bildskärmar.
på webbplatsen kan du hitta fullständig dokumentation och olika guider om hur du startar och anpassar produkten. Du kan börja använda produkten helt enkelt klistra in länken på din webbplats. Dessutom kan du använda Fontisto med pakethanterare som passar dig: npm, garn, bower, etc.,
Iconmonstr
webbplats: https://iconmonstr.com/
Format och typ: SVG, EPS, PSD och PNG, Marketplace
pris och Licens: Gratis
iconmonstrs samling av ikoner har 4400+ ikoner. Varje ikonuppsättning erbjuder både konturer och fyllda versioner av grafiken för att säkerställa att de kan användas för en mängd olika designapplikationer., Varje ikon på denna webbplats är tillgänglig gratis, och ikonfiler finns i sådana format som SVG, AI, PSD och PNG. Filerna kan användas för fria och kommersiella ändamål.
Iconmonstr gör det enkelt att söka efter ikoner via sin kraftfulla sökfunktion. Du kan även spara dina favoritikoner i en personlig samling för framtida bruk.
viktiga funktioner:
- fri användning av alla ikoner,
- fyra format nedladdningsalternativ, och
- neddimensionerade ikoner optimerade för webbanvändning.,
Pixsellz Material Icons Library
ett stort paket med över 1000 ikoner indelade i 16 olika kategorier. Free icon pack är inspirerad av materialdesign och presenteras i tre olika visuella stilar-rundad, kontur och tvåfärgad., Uppsättningen finns i 6 olika filformat, så att du kan använda ikonerna i din föredragna designprogramvara.
viktiga funktioner:
- 3 stilar,
- Figma stilar,
- 1000+ ikoner,
- 24×24 pixlar,
- skiss stilar och symboler,
- 16 kategorier, och
- 6 filformat.
Entypo
webbplats:http://www.entypo.com/
Format och typ: SVG
pris och Licens: Fri, Creative Common License 4.,0
entypo är en SVG icon Family Pack, omsorgsfullt utformad för några år sedan av Daniel Bruce i Sverige. Dessa ikoner är fantastiska: när det gäller freebies, de är överst i raden. Produkten kommer som SVG med 411 ikoner, fri med en Creative Commons licens.,
författaren säger att bygga ett teckensnitt tar mycket tid och det är bättre att spendera tid på att utveckla nya piktogram.
onda ikoner
webbplats: https://evil-icons.io/
Format och typ: SVG, Sketch
pris och Licens: Gratis, MIT
det här paketet är helt massivt och det kommer med allt-inklusive SVGs och de ursprungliga källfilerna., Det innebär att du kan ladda ner SVGs tillsammans med filer för Illustrator och .skissa filer för skiss.
varje ikon följer tunn linje stil och de är perfekta för de flesta webbplatser. Det faktum att du kan redigera den ursprungliga källan gör dem ännu mer värdefulla.,
Streamline Icons
Web-site: https://streamlineicons.com/
Format and Type: ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG
Price and License: Free to $411
Streamline Icons is another nice and adaptable free icon pack on the web market. The tool is organized in 53 categories with over 30000 vector icons.,
detta är en av de få ikonpaket optimerade för skiss, vilket gör det enkelt att manipulera stroke bredder och färger. Inbyggda Skissfunktioner som symboler och delade stilar gör återanvändning av element, som ikoner, en snabb och enkel process.
företaget har en egen webbapp som hjälper till att bläddra, söka och ladda ner ikoner direkt från webbläsaren.,
viktiga funktioner:
- mer än 30000 vektor ikoner organiserade;
- smarta slag för att ändra kontur tjocklek;
- skiss, AI, EPS, PDF, PNG, SVG format;
- webbapp för att söka och redigera ikoner;
- varje ikon i Streamline 3.0 har tre unika vikter: ljus, regelbunden och fet.,
Smashicons
webbplats:https://smashicons.com/
Format och typ: JAR, SVG, AI, SKETCH, Marketplace
pris och Licens: Gratis till $149
Smashicons erbjuder en omfattande samling ikoner med över 219000+ ikoner i sitt bibliotek. Smashicons fungerar lite annorlunda än andra: deras prissättning är baserad på en månatlig plan på $5/månad., Detta innebär att för $ 5 en månad får du tillgång till hela sin samling av befintliga ikoner samt eventuella framtida ikoner som de släpper ut.
viktiga funktioner:
- en mycket stor samling av ikoner,
- Alla ikoner är kompatibla med flera plattformar,
- lätt att använda webbapp för att söka och hitta de ikoner du behöver,
- prenumerationsbaserad affärsmodell,
- multiplatform support.
Icons8
webbplats:https://icons8.com/
Format och typ: SVG, PNG, PDF
licens och prissättning: Good Boy License, fri till 19.,90 per månad
ikonuppsättningen från icons8 kommer med mer än 120000 ikoner som täcker flera kategorier; från affärs-och kontorsinställningar till människor, mat och sociala medier ikoner. Ikonerna är utformade för att efterlikna utseendet på ett visst operativsystem. Du kan ladda ner dem i Windows, iOS och Android-versioner.,
ikonerna fungerar med Sketch, Photoshop och Xcode. Du kan använda en webbredigerare innan du laddar ner ikonerna till ditt system.
viktiga funktioner:
- SVG, PNG och HTML-format;
- ikoner som finns i olika stilar, till exempel linjeikon, fylld ikon och fullfärg;
- Alla ikoner kan laddas ner via .zip-fil;
- redigera innan du laddar ner;
- både gratis och betalda prenumerationsalternativ.,
Icomoon
Web-site: https://icomoon.io/
Format and Type: SVG, PNG, PDF
License and Pricing: Free to $139 per month
Icomoon comes as a complete tool for iconography and icon management. The product has a high-quality solution for editing and managing icons., Ikonerna Icomoon har handgjord på ett 16×16-rutnät och finns i SVG, EPS, PSD, PDF och AI-format. Ikonuppsättningen uppdateras också ständigt av dess skapare.
varje ikon pack har detaljerad licensiering så att designers och utvecklare vet exakt hur ikoner kan användas. Användare kan också göra sina egna anpassade ikon typsnitt.
viktiga funktioner:
- omfattande ikonhanteringsverktyg,
- gratis och betalda nedladdningsalternativ,
- ett brett utbud av nedladdningsformat,
- gratis och enkla uppdateringar.,
Glyphish Icon Pack
glyphish erbjuder en mängd olika ikonpaket. Varje förpackning kommer i en mängd olika format, inklusive PNG, SVG, PSD och AI. Basic icon pack är tillgänglig för $ 25 medan den ultimata är tillgänglig till ett vanligt pris på $ 99. Den fria demo innehåller 50 ikoner. Alla ikoner kan enkelt redigeras av designers.,
viktiga funktioner:
- ikoner för flera plattformar: iOS, Android, Web, Windows;
- en uppsättning av 50 gratis ikoner;
- lätt dra-och-släpp i Xcode;
- ikoner speciellt storlek för Apple Retina-skärmar.,
Ionikoner
webbplats: https://ionicons.com/
Format och typ: SVG och Webfont, Icon font
licens: mit
det joniska laget bestämde sig för att släppa sina ikoner som en webfont som heter ionicons. Naturligtvis är de helt gratis och tillgängliga på GitHub. Du kan även lägga till dessa ikoner direkt till din webbplats med CDN-versionen av stilmallen., Den stöder fullt SVG och webb typsnitt.
viktiga funktioner:
- helt gratis,
- enkel installation genom att kopiera och klistra in länk,
- kommer som en webfont,
- anpassade storlekar,
- över 1100 objekt.
Vinkelmaterial ikoner
materialikonen är gratis ikon pack från Google., För att säkerställa läsbarhet och tydlighet har dessa ikoner optimerats för att se bra ut på alla plattformar och skärmar. Dessa materialikoner är helt gratis och tillgängliga på GitHub. Denna ikon pack är helt massiv med över 1,000 ikoner som täcker ett brett utbud av gränssnittsfunktioner.
alla symboler finns i fem teman. Du kommer att få en rad nedladdningsbara storlekar och densiteter. Det bästa formatet för webbprojekt är en enkel att använda ikon webb typsnitt.,
Linearicons
linear icon pack är en av de mest populära och bästa ikon förpackningar för personliga eller kommersiella ändamål. Linear icon pack kommer i både gratis och premium versioner. Den fria versionen av denna fantastiska ikon pack kommer under Creative Common license. Det finns också olika paket du kan välja för dina behov, till exempel skrivbordspaketet.,
Key features:
- CloudFront CDN;
- free version available;
- comes with different formats: SVG, PDF, Webfont.
Feathericons
Web-site: https://feathericons.com/
Format and Type: SVG, Webfont, Iconfont
License and Pricing: Free, MIT License
Feather is one of the most popular open-source icon sets., Dessa är öppen källkod ikoner som har utformats på en 24X24 rutnät. Ikonerna finns i SVG-format. Det är under MIT-licensen, och det finns cirka 250+ ikoner i öppen källkod.
ikonerna är lätta att redigera, rena och skarpa — oavsett storlek. De var utformade som en ikon typsnitt först, så det är tänkt att bäddas in som en webb typsnitt.,
Iconfinder
Web-site: https://www.iconfinder.com/
Format: SVG, PNG, ICO, Marketplace
License and Pricing: From $9 to $49 per month
Iconfinder is one of the most popular icon resources on the net. It offers over 4 million icons, providing users with a variety of search options including icon format, price, size, background, etc., Det finns flera månatliga betalningsplaner-från $9 till $ 49. Du kan också välja ”betala som du går” systemet.
ikonfiler finns i SVG, PNG, ICO, ICNS och Adobe Illustrator format, och dimensioner varierar mellan 16×16 till 512×512. Du kan också arbeta med några av webbplatsens bästa designers om du inte kan hitta något du gillar eller helt enkelt vill anpassade ikoner utformade speciellt för dig och ditt varumärke.,
viktiga funktioner:
- både fria och betalda användningsalternativ,
- flexibla sökfunktioner,
- ikoner tillgängliga i olika format,
- många kategorier och stilar,
- ikonredigerare.
Substantivprojektet
substantivprojektet erbjuder ett av de största ikonbiblioteken som finns tillgängliga på webben., De flesta av webbplatsens ikoner finns i SVG och PNG-format, liksom i svartvita stilar.
webbplatsens bibliotek består av ikonfiler som utformats av en mängd olika oberoende designers. Det är en plats där skapare och kreativa proffs kan samarbeta för att sälja sina mönster och hitta ett till synes oändligt bibliotek med premium ikoner.
det är väldigt enkelt att söka i detta enorma och omfattande ikonbibliotek. Ytterligare viktiga funktioner i denna ikon bibliotek inkluderar både gratis och premium nedladdning alternativ, många stora uppsättningar av ikoner, ETT program för Mac och mer., Denna ikon bibliotek uppdateras regelbundet, och nya ikoner och uppsättningar läggs ut varje dag.
viktiga funktioner:
- över 150 000 ikoner;
- SVG, PNG-format;
- Sök-och upptäcktsverktyg;
- kreativ gemensam licens med premiumalternativ;
- gratis och betalda nedladdningsalternativ;
- nya ikoner laddas upp på en nära daglig basis.
Fontawesome ikoner
webbplats:https://fontawesome.com/icons
Format och typ: SVG, PNG, Icon font, Marketplace
licens och prissättning: SIL OFL 1.,1
font awesome är den mest använda och den mest populära ikonen teckensnitt runt. Det är också standardikonen inställd för laget på bootstrap. Det finns också som SVG ikoner bland andra format.Licensen är öppen och gratis för allt, kommersiellt eller personligt.
varje ikon är fullt skalbar och underhållbar direkt i CSS., Du kan ändra färger, skuggor, bakgrundsgradienter och ganska mycket något annat med ren CSS3. En annan anledning att använda det här biblioteket är att det är helt optimerat och har inga kompatibilitetsproblem eftersom det inte kräver JavaScript alls.
viktiga funktioner:
- vektor typsnitt,
- varje ikon kommer med en CSS-klass& Unicode,
- gratis,
- byggd med tillgänglighet i åtanke,
- har enkel uppgradering över webbplatser,
- erbjuder ett skrivbord fuskark för hela ikonbiblioteket.,
Lineicons
webbplats: https://lineicons.com/
Format och typ: SVG, Web font, Icon font
licens och prissättning: gratis
lineicons ger också gratis cdn med tydlig dokumentation som gör det enkelt att komma igång.
denna ikon pack är helt gratis och kommer med 450+ linjeikoner., Den täcker varje enskild viktig ikon du behöver för projektet från olika kategorier. LineIcons ger också gratis CDN och tydlig dokumentation för att komma igång enkelt. Den levereras med 2 olika skalbara paket — WebFonts och SVG-filer som du kan använda beroende på dina projektbehov.
viktiga funktioner:
- 450+ Gratis ikoner,
- SVG-filer,
- webb typsnitt redo,
- gratis CDN.,
slutliga tankar
att välja rätt ikonbiblioteksresurs för ditt projekt bör inte baseras på vad som anses vara mest populärt utan snarare vad som bäst passar behoven hos ditt projekt. När du väljer ikoner, var uppmärksam på hur lätt det är att starta ett projekt, vilka format finns i biblioteket och priset.
en viktig faktor när du väljer ett ikonpaket kommer också att matcha stilen på din applikation eller webbplats.
Vi hoppas att den här artikeln hjälper dig att välja den lämpligaste lösningen för dina behov.