The material icon font is the easiest way to incorporate material icons with web projects. We have packaged all the material icons into a single font that takes ...
Google
Fonts
Language
English
BahasaIndonesia
Deutsch
Español
Français
Português–Brasil
Русский
中文–简体
日本語
한국어
Signin
Home
Guides
Support
Google
Fonts
Home
Guides
Support
GetStarted
AndroidAPI
CSSAPIv2
MaterialSymbolsGuide
MaterialIconsGuide
DeveloperAPI
TechnicalConsiderations
WebFontLoader
Home
Products
GoogleFonts
Guides
MaterialIconsGuide
Anoverviewofmaterialicons—wheretogetthemandhowtointegratethemwithyourprojects.
Whatarematerialicons?
Materialdesignsystemiconsaresimple,modern,friendly,andsometimes
quirky.Eachiconiscreatedusingourdesignguidelinestodepictinsimple
andminimalformstheuniversalconceptsusedcommonlythroughoutaUI.
Ensuringreadabilityandclarityatbothlargeandsmallsizes,theseicons
havebeenoptimizedforbeautifuldisplayonallcommonplatformsanddisplay
resolutions.
SeethefullsetofmaterialdesigniconsintheMaterialIconsLibrary.
Gettingicons
Theiconsareavailableinseveralformatsandaresuitablefordifferenttypes
ofprojectsandplatforms,fordevelopersintheirapps,andfordesignersin
theirmockupsorprototypes.
Licensing
Wehavemadetheseiconsavailableforyoutoincorporatethemintoyour
productsundertheApacheLicenseVersion2.0.Feelfreetoremixandre-sharetheseiconsanddocumentationinyour
products.We'dloveattributioninyourapp'saboutscreen,butit'snotrequired.
Browsinganddownloadingindividualicons
Thecompletesetofmaterialiconsareavailableonthematerialiconlibrary.TheiconsareavailablefordownloadinSVGorPNGs,formatsthatare
suitableforweb,Android,andiOSprojectsorforinclusioninanydesigner
tools.
Downloadingeverything
Grabthelateststableziparchive(~310MB)ofalliconsorthebleeding-edgeversionfrommaster.
GitRepository
Thematerialiconsareavailablefromthegitrepositorywhichcontainsthecompletesetoficonsincludingallthevariousformatswe
aremakingavailable.
$gitclonehttps://github.com/google/material-design-icons/
Iconfontfortheweb
Thematerialiconfontistheeasiestwaytoincorporatematerialiconswith
webprojects.Wehavepackagedallthematerialiconsintoasinglefontthat
takesadvantageofthetypographicrenderingcapabilitiesofmodernbrowsersso
thatwebdeveloperscaneasilyincorporatetheseiconswithonlyafewlinesof
code.
Usingthefontisnotonlythemostconvenientmethod,butitisefficientand
looksgreat:
900+iconsallfromasingle,smallfile.
ServedfromGoogleWebFontserversorcanbeselfhosted.
Supportedbyallmodernwebbrowsers.
Colored,sizedandpositionedentirelywithCSS.
Vector-based:Looksgreatatanyscale,retinadisplays,low-dpidisplay
screens.
Theiconfontweighsinatonly42KBinitssmallestwoff2formatand56KBinstandardwoffformat.
Bycomparison,theSVGfilescompressedwithgzipwillgenerallybearound62KBinsize,butthis
canbereducedconsiderablybycompilingonlytheiconsyouneedintoasingleSVGfilewithsymbol
sprites.
SetupMethod1.UsingviaGoogleFonts
TheeasiestwaytosetupiconfontsforuseinanywebpageisthroughGoogleFonts.AllyouneedtodoisincludeasinglelineofHTML:
SimilartootherGoogleWebFonts,thecorrectCSSwillbeservedtoactivatethe
'MaterialIcons'fontspecifictothebrowser.
AnadditionalCSSclasswillbedeclaredcalled.material-icons.
AnyelementthatusesthisclasswillhavethecorrectCSStorendertheseiconsfromthewebfont.
SetupMethod2.Selfhosting
Forthoselookingtoselfhostthewebfont,someadditionalsetupisnecessary.
Hosttheiconfontinalocation,forexamplehttps://example.com/material-icons.woff,andaddthefollowingCSSrule:
@font-face{
font-family:'MaterialIcons';
font-style:normal;
font-weight:400;
src:url(https://example.com/MaterialIcons-Regular.eot);/*ForIE6-8*/
src:local('MaterialIcons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2)format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff)format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf)format('truetype');
}
Inaddition,theCSSrulesforrenderingtheiconwillneedtobedeclaredto
renderthefontproperly.TheserulesarenormallyservedaspartoftheGoogle
WebFontstylesheet,butwillneedtobeincludedmanuallyinyourprojectswhen
self-hostingthefont:
.material-icons{
font-family:'MaterialIcons';
font-weight:normal;
font-style:normal;
font-size:24px;/*Preferrediconsize*/
display:inline-block;
line-height:1;
text-transform:none;
letter-spacing:normal;
word-wrap:normal;
white-space:nowrap;
direction:ltr;
/*SupportforallWebKitbrowsers.*/
-webkit-font-smoothing:antialiased;
/*SupportforSafariandChrome.*/
text-rendering:optimizeLegibility;
/*SupportforFirefox.*/
-moz-osx-font-smoothing:grayscale;
/*SupportforIE.*/
font-feature-settings:'liga';
}
UsingtheiconsinHTML
It’seasytoincorporateiconsintoyourwebpage.Here’sasmallexample:
face
face
Thisexampleusesatypographicfeaturecalledligatures,whichallowsrenderingofaniconglyphsimplybyusingitstextualname.Thereplacementisdoneautomaticallybythewebbrowserandprovidesmorereadablecodethantheequivalentnumericcharacterreference.
Thisfeatureissupportedinmostmodernbrowsersonbothdesktopandmobiledevices.
Browser
Versionsupportingligatures
GoogleChrome
11
MozillaFirefox
3.5
AppleSafari
5
MicrosoftIE
10
MicrosoftEdge
18
Opera
15
AppleMobileSafari
iOS4.2
AndroidBrowser
3.0
Forbrowsersthatdonotsupportligatures,fallbacktospecifyingtheiconsusingnumericcharacterreferencesliketheexamplebelow:
Normal
Findboththeiconnamesandcodepointsonthematerialiconslibrarybyselectinganyiconandopeningtheiconfontpanel.Eachiconfonthasacodepointsindexinourgitrepositoryshowingthecompletesetofnamesandcharactercodes(here).
Stylingiconsinmaterialdesign
Theseiconsweredesignedtofollowthematerialdesignguidelinesandtheylookbestwhenusingtherecommendediconsizesandcolors.Thestylesbelowmakeiteasytoapplyourrecommendedsizes,colors,andactivitystates.
/*Rulesforsizingtheicon.*/
.material-icons.md-18{font-size:18px;}
.material-icons.md-24{font-size:24px;}
.material-icons.md-36{font-size:36px;}
.material-icons.md-48{font-size:48px;}
/*Rulesforusingiconsasblackonalightbackground.*/
.material-icons.md-dark{color:rgba(0,0,0,0.54);}
.material-icons.md-dark.md-inactive{color:rgba(0,0,0,0.26);}
/*Rulesforusingiconsaswhiteonadarkbackground.*/
.material-icons.md-light{color:rgba(255,255,255,1);}
.material-icons.md-light.md-inactive{color:rgba(255,255,255,0.3);}
Sizing
Althoughtheiconsinthefontcanbescaledtoanysize,inaccordancewithmaterialdesigniconsguidelines,werecommendthemtobeshownineither18,24,36or48px.Thedefaultbeing24px.
CSSrulesforthestandardmaterialdesignsizingguidelines:
.material-icons.md-18{font-size:18px;}
.material-icons.md-24{font-size:24px;}
.material-icons.md-36{font-size:36px;}
.material-icons.md-48{font-size:48px;}
Materialiconslookbestat24px,butifaniconneedstobedisplayedinanalternativesize,usingtheaboveCSSrulescanhelp:
face
18px
face
face
24px
face
face
36px
face
face
48px
face
Coloring
Usingtheiconfontallowsforeasystylingofaniconinanycolor.Inaccordancewithmaterialdesigniconguidelines,foractiveiconswerecommendusingeitherblackat54%opacityorwhiteat100%opacitywhendisplayingtheseonlightordarkbackgrounds,respectively.Ifaniconisdisabledorinactive,usingblackat26%orwhiteat30%forlightanddarkbackgrounds,respectively.
Herearesomeexamples,usingthematerialCSSstylesdescribedabove:
.material-icons.md-dark{color:rgba(0,0,0,0.54);}
.material-icons.md-dark.md-inactive{color:rgba(0,0,0,0.26);}
.material-icons.md-light{color:rgba(255,255,255,1);}
.material-icons.md-light.md-inactive{color:rgba(255,255,255,0.3);}
Examplefordrawinganicononalightbackgroundwithadarkforegroundcolor:
face
Normal
face
face
Disabled
face
Examplefordrawinganicononadarkbackgroundwithalightforegroundcolor:
face
Normal
face
face
Disabled
face
Tosetacustomiconcolor,defineaCSSrulespecifyingthedesiredcolorforthefont:
.material-icons.orange600{color:#FB8C00;}
andthenusetheclasswhenreferringtotheicon:
face
Normal
face
Iconimagesfortheweb
Materialiconsarealsoavailableasregularimages,bothinPNGandSVGformats.
SVG
ThematerialiconsareprovidedasSVGsthataresuitableforwebprojects.Individualiconsaredownloadablefromthematerialiconslibrary.TheSVGsarealsoavailablefromthematerialdesigniconsgitrepositoryunderthepath:
material-design-icons/src/
Forexample,iconsformapsareinsrc/maps:
material-design-icons/src/maps/
Ifmultipleiconsareinuseonawebsite,creatingspritesheetsoutoftheimagesisrecommended.Formoreinformation,refertothedocumentationinthespritesdirectoryofthegitrepository.
PNG
PNGisthemosttraditionalwaytodisplayiconsontheweb.Ourdownloadsfromthematerialiconslibraryprovidebothsingleanddoubledensitiesforeachicon.Theyarereferredtoas1xand2xrespectivelyinthedownload.Iconsarealsoavailableinthegitrepositoryunder:
material-design-icons/png/
Ifmultipleiconsareinuseonawebsite,creatingspritesheetsoutoftheimagesisrecommended.Formoreinformation,refertorecommendationsinthespritesdirectoryinthegitrepository.
IconsforAndroid
PNGssuitableforAndroidareavailablefromthematerialiconslibrary.Thesecomeinallthesupportedscreendensitiessotheyshouldlookgoodonanydevice.
Theiconsarealsoavailableinthematerialdesigniconsgitrepositoryinthesamecombinationofcolorsandsizesnamedasfollows:
TheVectorDrawableiscurrentlyonlyavailableasablack24dpicon.Thisisforcompatibilitywithourmoststandardiconsize.Torendertheiconinadifferentcolor,usedrawabletintingavailableonAndroidLollipop.
WhenusingtheVectorDrawable,itmaynotbenecessarytoincludethexxxhdpidensityPNGsinceitisunlikelyadevicesupportingthatscreendensitydoesnotsupportVectorDrawables.
IconsforiOS
MaterialiconsalsoworkwellwithiniOSapps.Inboththematerialiconslibraryandgitrepository,theseiconsarepackagedupinXcodeimagesetswhichwillworkeasilywithXcodeAssetCatalogs(xcassets).TheseimagesetscanbeaddedtoanyXcodeAssetCatalogsbydraggingthemintoXcodeontotheassetcatalogorbycopyingthefolderintothexcassetfolder.
Theimagesetcontainsthesingle,doubleandtripledensityimages(1x,2x,3x)sotheyworkonallknowniOSscreendensities.Bothblackandwhiteiconsareprovided,butwerecommendusingUIImage'simageWithRenderingModewithUIImageRenderingModeAlwaysTemplatewhichwillallowtheimagetobeusedasanalphamaskthatcanbetintedtoanypossiblecolor.
Objective-Cexample:
UIButton*button=[[UIButtonalloc]init];
UIImage*closeImage=
[[UIImageimageNamed:@"ic_close"]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor=[UIColorcolorWithWhite:0alpha:0.54f];
[buttonsetImage:closeImageforState:UIControlStateNormal];
SwiftExample:
letbutton=UIButton()
letcloseImage=UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor=UIColor(white:0,alpha:0.54)
button.setImage(closeImage,forState:UIControlState.Normal)
IconsinRTL
LanguagessuchasArabicandHebrewarereadfromright-to-left(RTL).ForRTLlanguages,UIsshouldbemirroredtodisplaymostelementsinRTL.WhenauserinterfaceismirroredforRTL,someoftheiconsshouldalsobemirrored.Whentext,layout,andiconographyaremirroredtosupportright-to-leftUIs,anythingthatrelatestotimeshouldbedepictedasmovingfromrighttoleft.Forexample,forwardpointstotheleft,andbackwardspointstotheright.However,bemindfulthatthecontextinwhichtheiconisplacedalsoinfluenceswhetheraniconshouldbemirroredornot.
IconsshouldonlybemirrorediftheirdirectionmatchesotherUIelementsinRTLmode.WhenaniconrepresentsvisualfeaturesofyourwebsitethataredifferentinRTL,thentheiconshouldalsobemirroredinRTL.Forexample,ifthenumbersinanumberedlistareontherightsideintheRTLlanguage,thenthenumbersshouldbeontherightsideofthemirroredicon.
Note:IconsthatincludeaquestionmarkneedtobemirroredinArabicandFarsi,butnotinHebrew.Foranin-depthguidanceonthistopic,pleasereadtheBidirectionalitymaterialdesignspecarticle.
RTLiconsonAndroid
ThisAndroiddeveloperarticledescribesin-depthhowtoimplementRTLuserinterfaces.BydefaultonAndroid,iconsarenotmirroredwhenthelayoutdirectionismirrored.Youneedtospecificallymirrortheappropriateiconswhenneeded,eitherbyprovidingspecializedassetsforRTLlanguages,orusingframeworkfunctionalitytomirrortheassets.
ToprovidespecializedassetsforRTLlanguages,youcanusetheldrtlqualifieronresourcedirectories,suchasres/drawable-ldrtl/.ResourcesinsidesuchdirectorieswillonlybeusedforRTLlanguages.FordevicesrunningAndroidAPI19ornewer,theframeworkalsoprovidestheautoMirroredattributeforDrawables.Whenthisattributeissettotrue,thedrawablewillbeautomaticallymirroredonRTLlanguages.
UsingautoMirrored:
IfusingautoMirroredorprovidingalternateDrawableresourcesisn’tanoption,theImageViewscaleXattributecanalsobeusedtomirrordrawables(forinstance,byprovidingaRTL-specificlayoutinares/layout-ldrtldirectory).
Mirroringwithinthelayoutfile:
Lastly,drawablescanbemirroredprogrammatically.
ManuallycheckforlayoutdirectionusinggetLayoutDirection:
if(ViewCompat.getLayoutDirection(view)==ViewCompat.LAYOUT_DIRECTION_RTL){
//customcode
}
MirroringImageViewcontentsprogrammatically:
imageView.setScaleX(-1);
RTLiconsoniOS
iOShastheconceptofaUISemanticContentAttributethatisattachedtoeachview.Thiscanbeunspecified,forceLeftToRight,forceRightToLeft,playbackorspatial.iOSusesthisvalueandthe(left-to-right(LTR)/RTLsettingofthedevicepresentingtheinterfacetodeterminetheeffectiveLayoutDirectionoftheview.ThiseffectiveLayoutDirectiondetermineswhetherornottomirroranimagewhenitisdisplayed.
Bydefault,images'semanticcontentissettounspecified.ThiscausesthemtobemirroredinRTLmode.Ifyoudonotwantanicontoeverbemirrored,youneedtoexplicitlysetittobeforceLeftToRight.Applecallsoutsomeexceptionsthatshouldnotbemirrored,suchasmediaplayback(FastForward,rewind,etc.),musicalnotes,imagesindicatingthepassageoftime,etc.
Objective-Cexample:
//PreventaniconfrombeingmirroredinRTLmode
UIImage*icon=[UIImageimageNamed:@"my_icon.png"];
UIImageView*iconView=[[UIImageViewalloc]initWithImage:icon];
iconView.semanticContentAttribute=
UISemanticContentAttributeForceLeftToRight;
Swiftexample:
//PreventaniconfrombeingmirroredinRTLmode
leticonImage=UIImage.init(named:"my_icon.png")
leticonView=UIImageView.init(image:iconImage)
iconView.semanticContentAttribute=.forceLeftToRight;
Formorein-depthdocumentationonhowtoimplementRTLoniOSandmacOS,pleasereviewApple'sRTLdocumentation.
SemanticcontentwasaddediniOS9.IfyouaresupportingearlierversionsofiOS,thematerialinternationalizationframeworkbackportssomeofthefunctionalitytoiOS8.
RTLiconsontheweb
WerecommendthefollowingarticleasaprimertoRTLontheweb:https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2
Bydefaultontheweb,iconsarenotmirroredwhenthelayoutdirectionismirrored.Youneedtospecificallymirrortheappropriateiconswhenneeded.
TheexamplebelowshowshowtoimplementasimpleRTLCSSrule.Youcanalsoviewitoncodepen.
page.html
page.css
html[dir="rtl"].icon{
-moz-transform:scaleX(-1);
-o-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
transform:scaleX(-1);
filter:FlipH;
-ms-filter:"FlipH";
}
GenerateyourownRTLiconsusingImageMagick
IfmirroringtheiconsincodeisnotanoptionyoucanuseImageMagicktohorizontallymirrortheimage.
convert-flopmy_icon.pngmy_icon_rtl.png
WhichiconsshouldbemirroredforRTL?
HereisalistoficonsthatcanbeprogrammaticallymirroredtoRTL:
arrow_backarrowback
arrow_back_iosarrowbackios
arrow_forwardarrowforward
arrow_forward_iosarrowforwardios
arrow_leftarrowleft
arrow_rightarrowright
assignmentassignment
assignment_returnassignmentreturn
backspacebackspace
battery_unknownbatteryunknown
call_madecallmade
call_mergecallmerge
call_missedcallmissed
call_missed_outgoingcallmissedoutgoing
call_receivedcallreceived
call_splitcallsplit
chevron_leftchevronleft
chevron_rightchevronright
chrome_reader_modechromereadermode
device_unknowndeviceunknown
dvrdvr
event_noteeventnote
featured_play_listfeaturedplaylist
featured_videofeaturedvideo
first_pagefirstpage
flight_landflightland
flight_takeoffflighttakeoff
format_indent_decreaseformatindentdecrease
format_indent_increaseformatindentincrease
format_list_bulletedformatlistbulleted
forwardforward
functionsfunctions
helphelp
help_outlinehelpoutline
inputinput
keyboard_backspacekeyboardbackspace
keyboard_tabkeyboardtab
labellabel
label_importantlabelimportant
label_outlinelabeloutline
last_pagelastpage
launchlaunch
listlist
live_helplivehelp
mobile_screen_sharemobilescreenshare
multiline_chartmultilinechart
navigate_beforenavigatebefore
navigate_nextnavigatenext
next_weeknextweek
notenote
open_in_newopeninnew
playlist_addplaylistadd
queue_musicqueuemusic
redoredo
replyreply
reply_allreplyall
screen_sharescreenshare
sendsend
short_textshorttext
show_chartshowchart
sortsort
star_halfstarhalf
subjectsubject
trending_flattrendingflat
toctoc
trending_downtrendingdown
trending_uptrendingup
undoundo
view_listviewlist
view_quiltviewquilt
wrap_textwraptext
Exceptasotherwisenoted,thecontentofthispageislicensedundertheCreativeCommonsAttribution4.0License,andcodesamplesarelicensedundertheApache2.0License.Fordetails,seetheGoogleDevelopersSitePolicies.JavaisaregisteredtrademarkofOracleand/oritsaffiliates.
Lastupdated2022-04-20UTC.
[{
"type":"thumb-down",
"id":"missingTheInformationINeed",
"label":"MissingtheinformationIneed"
},{
"type":"thumb-down",
"id":"tooComplicatedTooManySteps",
"label":"Toocomplicated/toomanysteps"
},{
"type":"thumb-down",
"id":"outOfDate",
"label":"Outofdate"
},{
"type":"thumb-down",
"id":"samplesCodeIssue",
"label":"Samples/codeissue"
},{
"type":"thumb-down",
"id":"otherDown",
"label":"Other"
}]
[{
"type":"thumb-up",
"id":"easyToUnderstand",
"label":"Easytounderstand"
},{
"type":"thumb-up",
"id":"solvedMyProblem",
"label":"Solvedmyproblem"
},{
"type":"thumb-up",
"id":"otherUp",
"label":"Other"
}]
Connect
GoogleFontsBlog
@googlefontsonTwitter
ProductInfo
TermsofService
Developerconsoles
GoogleAPIConsole
GoogleCloudPlatformConsole
GooglePlayConsole
FirebaseConsole
ActionsonGoogleConsole
CastSDKDeveloperConsole
ChromeWebStoreDashboard
Android
Chrome
Firebase
GoogleCloudPlatform
Allproducts
Terms
Privacy
SignupfortheGoogleDevelopersnewsletter
Subscribe
Language
English
BahasaIndonesia
Deutsch
Español
Français
Português–Brasil
Русский
中文–简体
日本語
한국어
