[{"data":1,"prerenderedAt":10},["ShallowReactive",2],{"guide-material-symbols-vs-material-icons":3},{"slug":4,"title":5,"description":6,"date":7,"order":8,"html":9},"material-symbols-vs-material-icons","Material Symbols vs. Material Icons: what's the difference?","How Google's current Material Symbols differ from the older Material Icons — styles, variable axes, icon count, naming — and how to migrate a project from one to the other.","2026-09-24",3,"\u003Cp>Google has two icon sets with similar names, and search results mix them up. In short: \u003Cstrong>Material Symbols\u003C\u002Fstrong> is the current, actively updated set, and \u003Cstrong>Material Icons\u003C\u002Fstrong> is the older set, which still works but no longer gets new icons.\u003C\u002Fp>\n\u003Ch2>At a glance\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C\u002Fth>\n\u003Cth>Material Icons (classic)\u003C\u002Fth>\n\u003Cth>Material Symbols\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Status\u003C\u002Ftd>\n\u003Ctd>Maintained, but no new icons\u003C\u002Ftd>\n\u003Ctd>Current, updated regularly\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Styles\u003C\u002Ftd>\n\u003Ctd>Filled, Outlined, Round, Sharp, Two-tone\u003C\u002Ftd>\n\u003Ctd>Outlined, Rounded, Sharp\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Customization\u003C\u002Ftd>\n\u003Ctd>Fixed styles\u003C\u002Ftd>\n\u003Ctd>Variable fill, weight, grade and optical size\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Font classes\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>material-icons\u003C\u002Fcode>, \u003Ccode>material-icons-outlined\u003C\u002Fcode>, …\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>material-symbols-outlined\u003C\u002Fcode>, \u003Ccode>material-symbols-rounded\u003C\u002Fcode>, \u003Ccode>material-symbols-sharp\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Number of icons\u003C\u002Ftd>\n\u003Ctd>About 2,100\u003C\u002Ftd>\n\u003Ctd>Over 3,900 (see the \u003Ca href=\"\u002Fbrowse\u002F\">full list\u003C\u002Fa>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2>Styles: five fixed versus three variable\u003C\u002Fh2>\n\u003Cp>Material Icons shipped five separate fonts, one per style. Material Symbols has three styles — Outlined, Rounded and Sharp — and each one is a variable font:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>The classic \u003Cstrong>Filled\u003C\u002Fstrong> style corresponds to any Symbols style with \u003Cstrong>fill set to 1\u003C\u002Fstrong>.\u003C\u002Fli>\n\u003Cli>Classic \u003Cstrong>Outlined\u003C\u002Fstrong>, \u003Cstrong>Round\u003C\u002Fstrong> and \u003Cstrong>Sharp\u003C\u002Fstrong> map to Symbols \u003Cstrong>Outlined\u003C\u002Fstrong>, \u003Cstrong>Rounded\u003C\u002Fstrong> and \u003Cstrong>Sharp\u003C\u002Fstrong> with fill 0.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Two-tone\u003C\u002Fstrong> has no direct equivalent in Symbols.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>On top of fill, Symbols adds weight, grade and optical size. See the \u003Ca href=\"\u002Fguides\u002Fmaterial-symbols-fill-weight-grade-optical-size\u002F\">guide to the variable axes\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2>Names\u003C\u002Fh2>\n\u003Cp>Most icons have the same name in both sets, so \u003Ccode>home\u003C\u002Fcode>, \u003Ccode>search\u003C\u002Fcode> and \u003Ccode>delete\u003C\u002Fcode> work as they are. Some icons were renamed or merged in Symbols, and Symbols adds many icons that never existed in the classic set. If a classic name doesn't show an icon in Symbols, search this site for what the icon means.\u003C\u002Fp>\n\u003Ch2>Migrating a website\u003C\u002Fh2>\n\u003Col>\n\u003Cli>\u003Cp>\u003Cstrong>Swap the stylesheet.\u003C\u002Fstrong> Replace the Material Icons font link with the Material Symbols one:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><!-- Before -->\n<link rel="stylesheet" href="https:\u002F\u002Ffonts.googleapis.com\u002Ficon?family=Material+Icons" \u002F>\n<!-- After -->\n<link rel="stylesheet" href="https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Update the class names\u003C\u002Fstrong>: \u003Ccode>material-icons\u003C\u002Fcode> → \u003Ccode>material-symbols-outlined\u003C\u002Fcode> (or rounded or sharp).\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Recreate the Filled look\u003C\u002Fstrong> where you need it, with \u003Ccode>font-variation-settings: "FILL" 1\u003C\u002Fcode>. Classic Material Icons default to the filled style, so if your existing icons look filled, you'll want fill 1 to match.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Check every icon renders.\u003C\u002Fstrong> A name that doesn't exist in Symbols shows up as plain text, which makes missing icons easy to spot on the page.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>What about frameworks?\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>MUI (React):\u003C\u002Fstrong> \u003Ccode>@mui\u002Ficons-material\u003C\u002Fcode> contains the classic Material Icons as React components. To use Symbols with MUI, use the font with MUI's \u003Ccode>Icon\u003C\u002Fcode> component (set \u003Ccode>baseClassName\u003C\u002Fcode> to \u003Ccode>material-symbols-outlined\u003C\u002Fcode>) or import SVGs.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Angular Material:\u003C\u002Fstrong> \u003Ccode><mat-icon>\u003C\u002Fcode> works with Symbols. Set \u003Ccode>fontSet="material-symbols-outlined"\u003C\u002Fcode> on the icon, or register it as the default font set.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Flutter:\u003C\u002Fstrong> Flutter's built-in \u003Ccode>Icons\u003C\u002Fcode> class is the classic set. The community \u003Ccode>material_symbols_icons\u003C\u002Fcode> package provides Symbols with fill and weight options.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Android:\u003C\u002Fstrong> Android Studio's Vector Asset tool includes Material icons, and you can import any Symbols SVG from this site as a vector drawable.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Should you switch?\u003C\u002Fh2>\n\u003Cp>For new projects, use Material Symbols: it has more icons, gets updates, and one font covers every style. For an existing project on Material Icons, there's no urgency — it keeps working — but switching is usually a short find-and-replace plus a check for renamed icons.\u003C\u002Fp>\n",1790274093749]