Med den \u00f6kande anv\u00e4ndningen av h\u00f6guppl\u00f6sta sk\u00e4rmar har vi sett \u00f6kningen av SVG-ikoner. Till skillnad fr\u00e5n en bitmappsgrafik \u00e4r SVG skalbar och uppl\u00f6sningsoberoende, vilket g\u00f6r att den f\u00f6rblir skarp oavsett sk\u00e4rmstorlek och uppl\u00f6sning.<\/p>\n
S\u00e5 h\u00e4r har vi samlat de b\u00e4sta resurserna fr\u00e5n vilka du kan f\u00e5 h\u00f6gkvalitativa SVG-ikoner. Vissa av resurserna tillhandah\u00e5ller mer \u00e4n bara ikoner och erbjuder bekv\u00e4ma funktioner f\u00f6r att \u00f6ka produktiviteten f\u00f6r designers och utvecklare.<\/p>\n
Utan vidare, l\u00e5t oss g\u00e5 vidare till hela listan.<\/p>\n
Hem till v\u00e4rldens st\u00f6rsta ikonbibliotek, Freepik har mer \u00e4n 10 miljoner ikoner<\/strong> f\u00f6r personligt eller kommersiellt bruk. Varje ikon \u00e4r fritt tillg\u00e4nglig p\u00e5 PNG-format<\/strong>, vilket m\u00f6jligg\u00f6r enkel integrering i dina projekt och kr\u00e4ver helt enkelt tillskrivning. Premiummedlemmar f\u00e5r dock tillg\u00e5ng till att ladda ner varje ikon p\u00e5 SVG-format<\/strong>utan krav p\u00e5 tillskrivning, och de kommer ocks\u00e5 att ha tillg\u00e5ng till ett antal banbrytande funktioner utformade f\u00f6r att \u00f6ka produktiviteten.<\/p>\n <\/i> Bes\u00f6k Freepik <\/a><\/p>\n Flaticon \u00e4r en av de st\u00f6rsta ikonbibliotek<\/strong> I n\u00e4tet. Ger mer \u00e4n 10 miljoner ikoner<\/strong> i flera stilar som du kan v\u00e4lja mellan att ladda ner och anpassa f\u00f6r dina projekt. Dessa ikoner \u00e4r tillg\u00e4ngliga som PNG, SVG, EPS, PSD-filer<\/strong>, s\u00e5 att de enkelt kan anv\u00e4ndas med andra grafikprogram. Du kan till och med hitta animerade ikoner och klisterm\u00e4rken<\/strong> i ditt bibliotek. Du kan ocks\u00e5 anv\u00e4nda Flaticon webbredakt\u00f6r<\/strong> f\u00f6r att \u00e4ndra f\u00e4rg och storlek p\u00e5 tillg\u00e5ngarna.<\/p>\n <\/i> Bes\u00f6k Flaticon <\/a><\/p>\n En officiell ikonsamling f\u00f6r Bootstrap, ett av de mest popul\u00e4ra HTML\/CSS-ramverken. Inneh\u00e5ller 1500+ ikoner i SVG<\/strong> format, vilket ger det mycket flexibilitet. \u00c4ven om dessa ikoner \u00e4r utvecklade f\u00f6r Bootstrap, kan du fortfarande anv\u00e4nda dem med vilket annat ramverk som helst.<\/p>\n <\/i> Bes\u00f6k Bootstrap Icons <\/a><\/p>\n Ikonerna inneh\u00e5ller mer \u00e4n 1500 ikoner<\/strong> grupperade i olika kategorier som e-handel, ekonomi och musik, s\u00e5 att du enkelt kan sortera och hitta den specifika samlingen. <\/p>\n Varje ikon kommer i ett annat format; Inte bara kan du v\u00e4lja och ladda ner dem som SVG, men du kan ocks\u00e5 anv\u00e4nda dem som teckensnittsikon<\/strong> och Webbkomponenter<\/a>. Det \u00e4r en av mina go-to’s n\u00e4r jag beh\u00f6ver ikoner f\u00f6r en webbplats eller app.<\/p>\n <\/i> Bes\u00f6k Bootstrap Icons <\/a><\/p>\n Leta efter 200+ vackert designade ikoner<\/strong>. En sak jag \u00e4lskar med samlingen \u00e4r att den l\u00e5ter dig anpassa storleken, streckbredden och f\u00e4rgen innan du laddar ner ikonerna. Ut\u00f6ver det kan du v\u00e4lja att ladda ner s\u00e4rskilda ikoner eller ladda ner dem alla p\u00e5 en g\u00e5ng<\/strong>.<\/p>\n <\/i> Bes\u00f6k fj\u00e4derikoner <\/a><\/p>\n Iconoir \u00e4r en Gratis och \u00f6ppen k\u00e4llkodsamling med 900+ ikoner<\/strong>. Den finns i flera format inklusive SVG, Font, React.js och till och med figur<\/a> och inramare<\/a>. B\u00e5de designers och utvecklare kommer s\u00e4kert att uppskatta denna kollektion.<\/p>\n <\/i> Bes\u00f6k Iconoir <\/a><\/p>\n En samling ikoner jonisk ram<\/a> Den \u00e4r designad f\u00f6r anv\u00e4ndning i webb-, mobil- eller station\u00e4ra applikationer. Varje ikon finns i tre olika stilar: Beskriva<\/strong>, Fylld<\/strong>och Skarp<\/strong>. De finns som SVG- och typsnittsikoner.<\/p>\n <\/i> Bes\u00f6k Ionicons <\/a><\/p>\n Inneh\u00e5ller mer \u00e4n 1300 ikoner, tabell<\/strong> Det \u00e4r en av de perfekta samlingarna att integrera i designen av din webbplats eller applikation. Det ser skarpt, konsekvent och anpassningsbart ut. Varje ikon \u00e4r tillg\u00e4nglig i flera andra format \u00e4n SVG, inklusive JSX, data-URI, React-komponent, webbfont, SCSS<\/strong>Dessutom visar den dig ocks\u00e5 n\u00e5gra exempel p\u00e5 hur du kan till\u00e4mpa ikonerna p\u00e5 en UI-komponent.<\/p>\n <\/i> Bes\u00f6k Tabler-ikoner <\/a><\/p>\n TILL upps\u00e4ttning ikoner designade med tunna konturer<\/strong> \u00e4r tillg\u00e4nglig. Varje ikon \u00e4r 15×15 pixlar och ser skarp ut p\u00e5 sk\u00e4rmen. Du kan f\u00e5 samlingen som en Figma-fil, Sketch-fil, IconJar, SVG eller NPM. Dessa olika format m\u00f6jligg\u00f6r smidigt samarbete mellan designers och utvecklare.<\/p>\n <\/i> Bes\u00f6k Radix-ikoner <\/a><\/p>\n Heroicons \u00e4r en upps\u00e4ttning ikoner designade av m\u00e4nniskorna bakom Medvind<\/a>. Ger mer \u00e4n 200 ikoner. Varje ikon kommer tv\u00e5 stilar: “Kontur” och “Fyll”<\/strong>och finns som SVG-, JSX- eller Vue-komponentbibliotek<\/strong>. F\u00f6r designers kan du ladda ner Figma-filen f\u00f6r alla ikoner.<\/p>\n <\/i> Bes\u00f6k Heroicons <\/a><\/p>\n Denna ikon \u00e4r en del av Myrdesign<\/a> system, men du kan installera ikonsamlingen som en frist\u00e5ende komponent via NPM. Varje ikon \u00e4r tillg\u00e4nglig som react.js-komponent<\/strong> och kommer att renderas som SVG. <\/p>\n Den finns ocks\u00e5 i tre stilar: gr\u00e4ns<\/strong>, Fylld<\/strong>, tv\u00e5 toner<\/strong> \u2014 och st\u00f6der f\u00e4rgschemat i ljust eller m\u00f6rkt l\u00e4ge direkt fr\u00e5n f\u00f6rpackningen. Om du bygger en React.js-app \u00e4r detta en av de b\u00e4sta ikonsamlingarna att v\u00e4lja mellan.<\/p>\n <\/i> Bes\u00f6k myrdesignikoner <\/a><\/p>\n Remix ikon<\/strong> Det \u00e4r en fantastisk samling av 2000+ ikoner. Vissa av ikonerna har flera varianter. Till exempel finns det mer \u00e4n ett dussin varianter av hemikonen. Detta g\u00f6r att du kan v\u00e4lja den perfekta passformen f\u00f6r ikonen som matchar din webbplatss personlighet.<\/p>\n <\/i> Bes\u00f6k remixikonen <\/a><\/p>\n Detta \u00e4r en samling ikoner Googles “Material” designsystem<\/a>. Den levereras med ett intuitivt anv\u00e4ndargr\u00e4nssnitt som ger bekv\u00e4mlighet f\u00f6r att distribuera ikonerna p\u00e5 flera olika plattformar inklusive webben, vare sig det \u00e4r SVG eller ikonfiler, Android, iOS, Flutter och \u00e4r ocks\u00e5 speciellt integrerad med Angular<\/a>.<\/p>\n <\/i> Bes\u00f6k materialdesignikoner <\/a><\/p>\n Ett Github-ikonbibliotek, dessa ikoner har skapats f\u00f6r designsystemet “Primer”. specifikt f\u00f6r Github-appar<\/strong>, vilket g\u00f6r det till ett perfekt set om du bygger en webbplats eller app integrerad med Github. Du kan installera och anv\u00e4nda ikonerna genom Juvel<\/a> (ett Ruby-paket), NPM eller som en React.js-komponent.<\/p>\n <\/i> Bes\u00f6k Octicons <\/a><\/p>\n TILL upps\u00e4ttning SVG-ikoner skapade som React.js-komponenter<\/strong>. Du kan hitta n\u00e5gra unika ikoner i samlingen, och vissa ikoner finns till och med i fullf\u00e4rg ist\u00e4llet f\u00f6r bara svartvitt.<\/p>\n <\/i> Bes\u00f6k knapph\u00e5lsikoner <\/a><\/p>\n Denna webbplats tillhandah\u00e5ller cirka 700 h\u00f6gkvalitativa ikoner. Ikonsamlingen finns tillg\u00e4nglig i m\u00e5nga format inklusive CSS, SVG, TypeScript, Figma, Adobe XD och som en API-slutpunkt<\/strong>. Detta g\u00f6r det l\u00e4ttare att samarbeta mellan designers och utvecklare n\u00e4r man designar webbplatser och omvandlar designen till kod.<\/p>\n <\/i> Bes\u00f6k CSS.gg <\/a><\/p>\n Typicons \u00e4r en samling vackra och moderna ikoner designade f\u00f6r webb- eller inhemska applikationer (mobil och station\u00e4r). I skrivande stund finns det runt 300 ikoner. Var och en \u00e4r tillg\u00e4nglig i SVG-teckensnitt och ikonformat och \u00e4r uppl\u00f6sningsoberoende, vilket g\u00f6r att de ser skarpa och skarpa ut oavsett sk\u00e4rmuppl\u00f6sning.<\/p>\n <\/i> Bes\u00f6k Typicons <\/p>\n <\/span>Flatikon<\/a><\/span><\/h4>\n
<\/span>Startikoner<\/a><\/span><\/h4>\n
<\/span>L\u00e5dor<\/a><\/span><\/h4>\n
<\/span>Fj\u00e4der ikoner<\/a><\/span><\/h4>\n
<\/span>iconir<\/a><\/span><\/h4>\n
<\/span>jonikoner<\/a><\/span><\/h4>\n
<\/span>Tabell ikoner<\/a><\/span><\/h4>\n
<\/span>Basikoner<\/a><\/span><\/h4>\n
<\/span>Heroikoner<\/a><\/span><\/h4>\n
<\/span>Myra design ikoner<\/a><\/span><\/h4>\n
<\/span>Remix ikon<\/a><\/span><\/h4>\n
<\/span>Material design ikoner<\/a><\/span><\/h4>\n
<\/span>Octicons<\/a><\/span><\/h4>\n
<\/span>Ikon knapph\u00e5l<\/a><\/span><\/h4>\n
<\/span>css.gg<\/a><\/span><\/h4>\n
<\/span>typisk<\/a><\/span><\/h4>\n