The 50 Best Free Icon Fonts for UI Design
文章推薦指數: 80 %
We have a collection of the best @font-face icon fonts that you can freely download and use in your next mobile app or web design projects. Home Browse Searchthissite SearchOurTwitterPageOurFacebookPageRSSFeed ContentbyCategory BootstrapFramework CSS DesignTrends Fonts FreelanceDesign GeneralDesign Icons DesignInspiration JavaScript LogoDesign MotionDesign Photography PrintDesign UIDesign UXDesign WebDesign WordPress WordPressPlugins WordPressThemes ContentbyApplication AdobeAfterEffects AdobeIllustrator AdobeInDesign AdobeLightroom AdobePhotoshop AdobePremierePro AdobeXD AppleKeynote AppleMotion Figma FinalCutPro MicrosoftPowerpoint Procreate SketchApp Download10FreeDesignTemplatesFromAdobeStockDownloadNow The50BestFreeIconFontsforUIDesign ByPaulAndrewonFeb9th,2022 Fonts&Icons&UIDesign Althoughverypopular,Iconfontsdoalsohavetheirpitfalls.IanFeatherhasdiscussedhisreasonsforswitchingfromaniconfonttoSVG,andCSSTrickshaveoutlinedsomeconsiderationswhenchoosingbetweenaniconfontsystemorSVG. BothclearlyfavorSVG.Asacounter-argument,Pictonichassaidthaticonfontsare10%fasterthanSVG.Thesearejustthingsyoushouldconsiderbeforeyoudouseiconfonts. Toensurethatyouriconsalwaysloadproperlyandhavereliablefallbacksforbrowsersthatdon’tsupport@fontface,youshouldtakealookattheguidelinesset-outbytheFilamentGroup,BulletproofAccessibleIconFonts. MoreFreeIconSets FreeIconSetsforWebDesigners FreeIconFontsforUIDesign FreeSocialMediaIconSets FreeCountryFlagIconSets FreePaymentMethodIconSets FreeGestureIconSetsforAppDesigners TheIcon&UIDesignerToolbox UnlimitedDownloads:1,000,000+IconSets,UIKits,WireframeTemplates,Themes,Plugins,andmuchmore! MagiconsIcons IconSets WebDevelopmentIcons IconSets WebDesign&DevSet IconSets Explore21,000+IconSets EvaIconsOpenSourceUIIconSet(480Icons) Ifyou’redesigninganewinterfaceoryouwanttoshowcaseyourproduct’sfeatures,checkoutthisgreat(andfree)iconfont.Theseopen-sourceiconsfeatureactionsanditems,fromarrowsandattachmentstocolorpalettes.Withover480icons,it’sthewholepackage! TrendyThinLineIconFont(100Icons,EnvatoElements) There’snothinglikeminimalismtohighlightyourproduct’squality,andthisiconsetisanexcellentchoiceforyournextproject.They’revectorsandfullyeditableinAdobeIllustrator.Fromfrequencyiconstobeautifuloutlinetoggleicons,you’llhaveeverythingyouneed! OpenIconicOpenSourceSet(223Icons) Stopworryingaboutmakingyouriconsworkwithyourtextformatting.Thisopen-sourceiconsetcomeswithover230practicalandtechnicaliconsindifferentformats,fromSVGtoWOFF.YoucanquicklysizethemtofityourneedswithCSS,andthey’reperfectlylegibleevenat8px. PictypoIconFontbyTypogama(EnvatoElements) Pictypooffersfunandengagingiconsrenderedwithdingbatfonts.Theroundedstyleaddsadashoffriendliness,andyou’llgetplentytoworkwith.Fromweathericonstoofficesymbols,Pictypoofferseverythingyouneed.Thelinesarebold,sotheylookgoodonlargedisplays,too. IoniconsIconPackforIonicFramework(1,100+Icons) Ioniconsisawell-roundediconpackfortheIonicframework.Youwillgetnumerousappicons(notifications,arrows,food,andmore),aswellasiconsfeaturingrenownedbrands’logos(e.g.,Pinterest).Dependingonyourneeds,youcandownloadoutline,filled,and/orsharpiconrendersasSVGandwebfontfiles. IcoframeWireframeIconSet(60Icons,EnvatoElements) MakeyournextprojectmoredynamicandengagingwithIcoframe–beautifulandmodernwireframeicons.You’llget60minimalistwireframeicons,fromsymbolsforloginpagestogrid,timeline,andtypographyicons.Thedesignisveryintuitive,andyoucaneasilycustomizetheminAdobeIllustrator. FontAwesome(1,500+Icons) FontAwesomeisamassiveandverypopulariconset.Theyofferover1,600freeicons,allofwhichhavebeenmeticulouslydesignedtoshowcasefriendlinessandeaseofuse.You’llfindeverythingfromAWSandotherbrandlogostobusinessandlifestyleiconsintheFAgallery. WirebetWireframeFonts(EnvatoElements) Wirebetfontsareagreatchoiceifyouwanttostreamlineyourworkflowandintegrateengagingiconsintoyourmaterialswithoutbootingupyourdesignsuite.You’llgetvarioustechnicalicons,fromsymbolsforportfoliopagestoarrowsanddeviceicons.Wirebetisperfectforwireframes! LineAwesomeIconFont(1,380Icons) AddmodernlineiconstoyourmaterialsinonelineofcodewithLineAwesome.ItimprovesuponFontAwesome’sofferandletsyouaddallsortsoficons(fromaccessibilityandbuildingtoarrowsandbrandicons)toyourwebsite(viaCDN),Figmaprototypes,andmuchmore. TheCraftyFontCollection(24Fonts,EnvatoElements) TheCraftyCollectionoffers24engagingandfunfontsthatyoucanusetomakeyournextdesignalotmoreexciting.Fromstarsandstripestoroughoutlinesandsprinkles,TheCraftyCollectionoffersfontcombinationsthatplaywelltogethersoyourdesignswillalwayslookcohesiveandinteresting. Dashicons,theWordPressAdminIconFont(300Icons) DashiconsisaniconfontforWordPress.IfyouwanttoemulatethesignatureWPstyleinotherprojects,you’llloveit.It’sverytechnicalinstyle,butitgetsthepointacrossandiseasytouse.FrombrandlogostoTinyMCE,runwild! RemixIconOpenSourceLibrary(2,000+Icons) RemixIconisanopen-sourceiconlibrarywithover2,200icons.Alloftheiconsarefreeforbothpersonalandcommercialuse.You’llseeawidevarietyoficons,fromthinoutlineiconstofilledsymbolsforextraemphasis.GetthemasPNG,SVG,orcode. ThemifyIconFont(320Icons) InspiredbyAppleiOS,Themifyiconsofferover300beautifulminimalisticons.Fromarrowstoappicons,you’llgeteverythingyouneedaseitheraniconfontforeasierworkflowintegration(SVGincluded),orapluginforWordPress.ThemifyiconsareperfectformodernUIdesign! DripiconsLine-IconFontv.2(200Icons) Ifyoudon’twantgarden-varietylineicons,checkoutDripicons.Thisfreeiconfontisincrediblyeasytouse,butthebestpartisthatthey’rebeautiful!You’llgetasetofversatileboldlineicons,fromarrowsandtechtoeducationandmusic. GitHub’sOcticonsIcons(180Icons) IfyoulikeGitHub’saesthetic,you’regoingtolovetheirOcticons.Theseiconsareavailableintwosizes(16pxand24px),andtheyalsoincludesomespecial-caseiconslikepullrequests.Youcantogglebetweenoutlineandfilledicons,andtheyworkperfectlywithdifferentprogramminglanguages. FoundationIconFonts(280Icons) GetgoingwithjustafewlinesofcodeandFoundationicons.Thiscollectioncomprisesdifferentsets,fromgeneraliconstoaccessibilityicons,sothere’ssomethingforeveryproject.Foundationiconsworkasawebfont,soyoudon’thavetojumpthroughhoops. DeviconsIconicFontforDevelopers(78Icons) Deviconsisaniconfontmadespecificallyfordevelopersandawidevarietyofprojects.Thefontcontains85icons,mainlybrandlogosforserviceslikeDropboxandcodingplatformslikePostgreSQL.Deviconscanbeintegratedbyaddingasinglelineofcodeintotheproject’sheaderHTML. TheElegantIconFont(360Icons) Beautiful,elegant,andengaging–thisiconfontcontainsover300diverseicons.They’resimpletointegrateanduse,especiallyifyou’veusedElegantThemesortheDivibuilderinthepast.Fromfileiconstoarrows,youwillfindeverythingyouneedinthisset. FeatherOpenSourceIconSet(282Icons) KeepitsimpleandaccessiblewithFeather,avastcollectionofopen-sourceicons.Fromarrowsandchevrons,toappUIicons,Featherisanexcellentadditiontoyourstandarddesigntoolbox.Youcancustomizethesize,strokewidth,andcolorofeveryicon,sotheyfityourbrandingperfectly. TypiconsIconFont(336Icons) Simple,friendly,andperfectforawidevarietyofprojects,Typiconsareagreatchoice.Theyareembeddedinawebfont,sothey’reeasytouse.You’llget336icons,fromcogsandarrowstobrandlogos.Youcanpickbetweenfillediconsoroutlines. IcoMoon’sFreeIconPack(490Icons) FreshenupyourstandardicontoolkitwithIcoMoon’sfreeicons.You’llget490vectoriconsthatareperfectforappandwebUI.Theseiconsaresimpleandminimalistwithabitofpersonality.Fromhomeiconstosmileyfaces,it’sthewholepackage! GenericonsNeueIconFont(100Icons) SimplifyyourdesignwithGenericons,asetofsimpleandminimalisticonsforwebandappdesign.Theyworkperfectlyforblogsorsimplewebsiteswhereyouwanttokeepthefocusonyourmessaging.You’llgetplentyoficonsforkeyfeatures,fromsitemapstoRSSfeeds. Icon-WorksFreeIconFont(136Icons) Afreeandstylishiconfont,Icon-Worksisanexcellentchoiceifyouwanttomakeyournextdesignstandout.You’llgetplentyofbeautiful,retina-readyiconsthatyoucancustomize.They’rescalable,soyoudon’tevenhavetoworryaboutre-sizingthem. MicronsIconFont(108Icons) Micronsiconstakeprideintheirsimplicity.Thecollectionprovidesiconsforthemostcommonusecases,fromchartsandarrowstonavigationicons.They’reeasytoencode,andthefileitselfisonly5kb,sothey’reperfectforuseacrossyourprojectportfolio. Stroke7IconFont(202Icons) StraightoutofthePixedenworkshop,Stroke7isacollectionofthin-lineicons.Thesetoffers200+iconsthatcanbecustomizedwithCSS.Theywereinspiredbytheearly00icons,sothey’renotgoingtostandoutanddrawattentionawayfromyourmainmessage. StrokeIconFontVol.1(80Icons) PetrasNargeladesignedasetof80strokeicons,andit’sfree.Thesebeautifuliconsarefresh,clean,andreadytospiceupyourdesigns.YoucandownloadthemasPSD,AI,orwebfontfiles.Ifyou’reneedsomethingdifferent,you’vefoundit! MaterialDesignIconicFont CreatedbyGoogle,theMaterialDesigniconsetcontainsplentyoficonsyoucanuseacrossyourprojects.Youjusthavetoaddonelineofcodetoyourwebsite,andyou’regoodtogo!Sincecommunitymembersconstantlyaddtheirownicons,there’splentyofvariety. MinimalOutlineEssentialIcons(77Icons) IfyourUIisminimalist,chooseiconsthatfollowthesameaestheticcues.Thisminimaloutlineiconsetcontainsover70cleanandsharpicons.Thevectorsarescalable,andyoucaneasilychangetheicons’colorstofityourstyle.Youcandownloadthemfreeinvariousformats. ToniconsOutlineIcons(300Icons) Toniconsisafantasticsetoficonfontsthatarenotjusteasytousebutbeautiful,too!You’llget300cleanandminimalistoutlineiconsforappandwebUIdesign.Fromallkindsoffilestomessagingicons,theToniconssetcoverseverysingleusecase. MetrizeMetro-StyleIcons(300Icons) Metrizeiconsbringyou300metro-styleiconsthatwillboostyournextproject.Youcanusethemforappsandwebsites,andit’sallveryeasysincethey’realsoavailableasawebfont.Frombrandlogostoarrows,Metrizehasgotyoucovered! CSSansProCSSFont CSSansisacolorfulanddynamicCSSfont.Composedofmultiplecolorfulgeometricelementsthataddvibrancytoyourdesigns,CSSansisallaboutpersonality!You’llgetuniqueuppercaseandlowercasecharacters,numerals,andothersymbols.It’sinfinitelycustomizableandgrabsattentionfromtheget-go! MFGLabsIconSet(120Icons) MFGLabsiconsetwasoriginallydesignedforaninternalproject,buttheteamcouldn’tresistsharingthisversatileiconset.They’reeasilyembeddableandcustomizablewithCSS.You’llfindalltheiconsyouneedtocreatetherightatmosphereforyournextdesign. LigatureSymbolsIconFont(240Icons) LigatureSymbolsisaniconfontwithfunandminimalisticons.Individualiconscanbecombinedtocreateligatures(e.g.,combinetableandcelliconstocreategrids),improvingthiscollection’susability.You’llfindeverythingyouneed,sogivethisfreeiconfontago! Devicon2.0Programming&DevelopmentIconFont(78Icons) Deviconsarefriendly,dev-friendlyiconscreatedtorepresentprogramminganddevelopmenttools.FromChromeandConfluencetoDjangoandAdobeIllustrator,you’llfindtheiconyou’vebeenlookingfor.Youcaneasilycopy-pastethemintoyourprojectsbyusingeitherthefontversionsorSVGversions. MiniIconFontSet(80Icons) Simpleandclean,theseminiiconsareperfectforawidevarietyofprojects,particularlythosemoreformalintone.Thisiconcollectioncontains80preciselymadeiconsinbothPSDandiconfontformats.Fromdownload/uploadsymbolstolocationandweathericons,thissetofferseveryiconyouneed! HeliumIconSet&Font(100Icons) TarasShypka’sHeliumiconsetoffersplentyoficons.Notonlydotheycomeineveryformatimaginable,butyoucanalsousethemasaniconfont.You’llget112iconswithfine-shadedlinesthataddgloss.Heliumisdefinitelyanaesthete’schoice! Gonzocons2.0LineIcons(100Icons) TheGonzoconssetdesignedbyJanRajtoraloffers100lineiconsthatperfectlyreplicatemodernicondesigntrends.Fromsimplisticarrowstobuoyantheartsandhourglasses,Gonzoconsiconsdefinitelyhaveapersonality.YoucangetthemasSVGfilesorasawebfontforeasierintegrationwithyourapp/site. MapIconMarkerFont(180Icons) MapIconsisaniconfontmadeforGoogleMapsandPlaces.YoucaneasilycustomizetheiconswithCSS,andpickfromover175icons.Fromgeneraliconsforhairsalonstoiconsforactivities,thissetgivesyouplentytochoosefromtomakeyournextprojectamazing. OutlinedIconsWebfont(150Icons) Simpleandfun,thissetoffers150outlinedicons.YoucangetthemasPSD,AI,SVG,orwebfontfiles.DarioFerrando’siconsareinspiredbycontemporarywebicondesign,buttheyhaveplentyofpersonalitytomakeyournextprojectstandoutandwowyouraudience. InfinitySpaceIcons(230Icons) Shootforthemoonwiththesebeautifulspaceicons.You’llgetover230symbols,includingspaceships,planets,andmore!They’reveryeasytouseasthey’readingbatfont,andifyoustarttypingthenumbers,you’llfindtheentiresolarsystem. WeatherThemedIconFont(222Icons) Ifaccurateforecastsareanimperativeforyournextproject,you’lllovethissetofweather-themedicons.Withover200icons(includingspecialtyiconslike28lunarphases),you’llbereadytocreatesomethingamazing!YoucaneasilycustomizethemwithCSStofityourneeds. MeteoconsWeatherIconFont(40Icons) Get40+minimalistandfriendlyweathericonswithMeteocons.Thissetofferseveryformatimaginable,fromSVGtodesktopandwebfonts.They’refreetousepersonallyandcommercially,andyoucanevencreateyourcustomfontwiththeiconsyoufrequentlyuse.Iconupdatesarefreetoo! StackiconsSocialIconFont(75Icons) AddmorecolortoyourdesignswithStackicons,acollectionofover60updatediconsfeaturingbrandlogos,fromDribbbletoReddit.They’lladdmorepersonalitytoyourstandarddesignkit.Youcanchooseregularicons,differentroundedvariations,orsquareicons,andthere’ssomethingforeveryone! SocialiciousSocialMediaIconLibrary(74Icons) Ifyou’reonthehuntforincrediblesocialicons,checkoutSocialicious.Itgivesyousocialmediaiconsinfontform,sothey’reincrediblyeasytouseandeveneasiertocustomize.Integratethemwithasinglelineofcode,andcustomizethemwithCSS. MonoSocialIconsFont(100Icons) Engaginganddynamic,MonoSocialaresocialmediaiconswithafunpersonality.Youcanusethemforfreeandpickoneofthethreepresentationoptions(rounded,circle,regular)tofityourstyle.UsethemwithCSS,HTML,andSCSS.They’refreeforpersonalandcommercialuse. FontfabricSocialMediaIconsPack(74Icons) CreatedbyJelioDimitrov,Socialicoisapackageof74vibrantandengagingsocialmediaicons.They’repackagedasawebfont,soeverycharacteronyourkeyboardgeneratesabeautifuliconwithplentyofpresentationalternates.Sincethesefonticonsarefree,addthemtoyourtoolbox! RelatedPosts The100BestFreeFontsfor2022 30BeautifulFreeSocialMediaIconSets 15FreeGestureIconSetsforMobileAppDesigners 50FreeCleanFontsforYourNextProject Top50FreeIconSetsforWebDesigners Exploringthe10MostPopularGoogleFonts 20BeautifullyDesignedFreeWebFonts 15BestFreeDisneyFontsYouShouldHaveinYourCollection 50FreeFontsforCreatingBeautifulHeadlines&Titles 12FreeDisplayFontswithaCreativeFlair RelatedTags FreeTemplatesIconFontsMonospaceSansSerifSerifWebFonts FreeonEnvatoElements AnkoSerifFontFamily FreeFileDownloadonElements FreeonEnvatoElements VioCreativeWordPressTheme FreeFileDownloadonElements RSSNewsletter SubscribetoourRSSnewsletterandreceiveallofourarticlesdirectlyinyouremailinboxdaily. Subscribe Subscribe Youcanunsusbscribeatanytime. CurrentlyPopular 10FreeResponsiveWebsiteMockupTemplates 15FreeVintage&AntiqueBrushPacksforAdobePhotoshop The20BestGlitchEffectPhotoshopActionSets 10Tools&ResourcesforBuildingaWordPressStagingSite 20FreeRetroFontFamiliesforDesigners TheEasyWaytoHostGoogleFontsLocally 10FreeCollectionsofFeminineLogoTemplatesforDesigners 20IncrediblePhotoshopActionsforSketchingEffects The20BestFreeOutlineFontsforDesigners 15BestFreeDisneyFontsYouShouldHaveinYourCollection HostedbyKinsta
延伸文章資訊
- 1Icons Fonts | FontSpace
Looking for Icons fonts? ✓ Click to find the best 188 free fonts in the Icons style. Every font i...
- 2The 50 Best Free Icon Fonts for UI Design
We have a collection of the best @font-face icon fonts that you can freely download and use in yo...
- 314 Free Icon Fonts For Web Designers | With Download ...
14 Free Icon Fonts for Web Designers · 1. Ionicons (441 icons) · 2. Shock Icon Font (1121 icons) ...
- 4Font Awesome Icon Pack | Fill | +365 .SVG Icons - Flaticon
Download now Font Awesome Free Icons - Pack Fill | Available sources SVG, EPS, PSD, PNG files. Pe...
- 5鐵人賽:網頁設計- Icon fonts 的常見資源 - 卡斯伯Blog
如果要使用Fontawesome 的圖示做設計,可以直接點選For the Desktop 下載圖示,下載後就包含大量的圖示SVG 可以直接運用。 因為有數千組圖示可以運用, ...