[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-material-symbols-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":54,"alternatives-material-symbols-en-US":127,"related-resources-material-symbols-en-US":164},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":16,"pros":25,"cons":30,"best_for":33,"cover":34,"icon":35,"pricing":36,"platform":10,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":37,"views_count":38,"featured_rank":10,"categories":39,"tags":44,"files":10},61,"Material Symbols","material-symbols","https:\u002F\u002Ffonts.google.com\u002Ficons","2026-06-12T06:45:57.001707+00:00",null,"The Next-Generation Variable Icon System from Google","Material Symbols is the latest-generation icon library, designed and maintained by Google as a major upgrade to the classic Material Icons. It not only adheres to the Material Design language but also innovatively introduces \"Variable Font\" technology, offering designers and developers an unprecedented level of customization.\nRevolutionary Variability: This is the core feature of Material Symbols. It packages all icons into a single variable font file and provides four adjustable \"axes\" for fine-tuning:\nWeight: Freely adjust the stroke thickness, from thin to bold.\nFill: Control whether the icon is an outline or fully filled.\nGrade: Fine-tune the visual weight for optical balance against different backgrounds or at different sizes.\nOptical Size: Automatically optimizes the icon's details and clarity for different display sizes.\nCompletely Free & Open Source: Google has made the entire Material Symbols library, including all its styles and variable features, available for free under the Apache 2.0 license, with no commercial restrictions.\nPerfectly Unified with the Google Ecosystem: As the official icon set for Material Design 3, it maintains perfect visual consistency with Android, Flutter, and various Google services, making it the best choice for building native-feeling experiences.\nComprehensive Coverage with Three Styles: It offers thousands of icons covering the vast majority of use cases. In addition to the variable font version, it also comes in three distinct, pre-set styles: Outlined, Rounded, and Sharp.\nMaterial Symbols is no longer just a static collection of icons; it's a dynamic and highly adaptive \"icon generation engine.\" Through variable font technology, it elevates the flexibility of icon design to a whole new dimension, enabling designers and developers to create the most visually harmonious and clear icons for any context with maximum efficiency.",{"title":14,"meta_description":15},"Material Symbols - The Next-Generation Variable Icon System from Google | DesignToolMark","Material Symbols is the latestgeneration icon library, designed and maintained by Google as a major upgrade to the classic Material Icons. It not only adhere...",[17,18,19,20,21,22,23,24],"Revolutionary Variability: This is the core feature of Material Symbols. It packages all icons into a single variable font file and provides four adjustable \"axes\" for fine-tuning:","Weight: Freely adjust the stroke thickness, from thin to bold.","Fill: Control whether the icon is an outline or fully filled.","Grade: Fine-tune the visual weight for optical balance against different backgrounds or at different sizes.","Optical Size: Automatically optimizes the icon's details and clarity for different display sizes.","Completely Free & Open Source: Google has made the entire Material Symbols library, including all its styles and variable features, available for free under the Apache 2.0 license, with no commercial restrictions.","Perfectly Unified with the Google Ecosystem: As the official icon set for Material Design 3, it maintains perfect visual consistency with Android, Flutter, and various Google services, making it the best choice for building native-feeling experiences.","Comprehensive Coverage with Three Styles: It offers thousands of icons covering the vast majority of use cases. In addition to the variable font version, it also comes in three distinct, pre-set styles: Outlined, Rounded, and Sharp.",[26,27,28,29],"Free to use","Open source","Extensive icon library","Customizable colors and sizes",[31,32],"Free tier may have limited selection","Premium assets require payment","Material Symbols is no longer just a static collection of icons; it's a dynamic and highly adaptive \"icon generation engine.\" Through variable font technology, it elevates the flexibility of icon design to a whole new dimension, enabling designers and developers to create the most visually harmonious and clear icons for any context with maximum efficiency.","screenshots\u002Fmaterial-symbols.webp","c8b63f82-0c0b-41cd-9470-3fd6389175a6.svg","free",{"free":3},0,[40],{"name":41,"slug":42,"sub_categories":43},"Icons","icons",[],[45,48,50,51],{"name":46,"slug":47},"Open Source","open-source",{"name":49,"slug":36},"Free",{"name":41,"slug":42},{"name":52,"slug":53},"Freebie","freebie",[55,75,88,101],{"id":56,"url":57,"icon":10,"name":58,"slug":59,"tags":60,"cover":71,"tagline":72,"is_featured":73,"date_created":74,"date_updated":10},862,"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[61,62,64,65,67,69],{"seo":10,"name":49,"slug":36},{"seo":10,"name":10,"slug":63},"fonts",{"seo":10,"name":10,"slug":42},{"seo":10,"name":10,"slug":66},"mockups",{"seo":10,"name":10,"slug":68},"ui-kits",{"seo":10,"name":10,"slug":70},"design-systems","39af338d-2e06-4c05-bfcb-b33066ed9bb7.webp","Official Apple design templates, UI kits, fonts, and tools",false,"2026-07-16T01:44:01.585569+00:00",{"id":76,"url":77,"icon":10,"name":78,"slug":79,"tags":80,"cover":85,"tagline":86,"is_featured":73,"date_created":87,"date_updated":10},861,"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients",[81,82,83],{"seo":10,"name":49,"slug":36},{"seo":10,"name":46,"slug":47},{"seo":10,"name":10,"slug":84},"colors","7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS","2026-07-16T01:39:25.742464+00:00",{"id":89,"url":90,"icon":10,"name":91,"slug":92,"tags":93,"cover":98,"tagline":99,"is_featured":73,"date_created":100,"date_updated":10},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[94,95,96],{"seo":10,"name":49,"slug":36},{"seo":10,"name":10,"slug":68},{"seo":10,"name":10,"slug":97},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration","2026-07-07T06:28:48.469215+00:00",{"id":102,"url":103,"icon":10,"name":104,"slug":105,"tags":106,"cover":124,"tagline":125,"is_featured":73,"date_created":126,"date_updated":10},859,"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[107,110,112,113,116,117,118,120,122],{"seo":10,"name":108,"slug":109},"AI Powered","ai-powered",{"seo":10,"name":10,"slug":111},"ai",{"seo":10,"name":49,"slug":36},{"seo":10,"name":114,"slug":115},"Freemium","freemium",{"seo":10,"name":10,"slug":68},{"seo":10,"name":10,"slug":70},{"seo":10,"name":10,"slug":119},"prototyping",{"seo":10,"name":10,"slug":121},"no-code",{"seo":10,"name":10,"slug":123},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00",[128,134,140,146,152,158],{"url":129,"name":130,"slug":131,"cover":132,"tagline":133},"https:\u002F\u002Fphosphoricons.com\u002F","Phosphor Icons","phosphor-icons","e320208a-130e-4acd-ad33-1d69d16f71e2.webp","Phosphor Icons is a flexible open-source icon family featuring 1,248 high-quality icons (continuously growing), suitable for interface design, diagrams, presentations, and various scenarios.",{"url":135,"name":136,"slug":137,"cover":138,"tagline":139},"https:\u002F\u002Ffontawesome.com\u002F","Font Awesome","font-awesome","12169026-957f-4335-907f-cce8d65c4ed2.webp","The Web's Icon Library and Swiss Army Knife",{"url":141,"name":142,"slug":143,"cover":144,"tagline":145},"https:\u002F\u002Ficonscout.com\u002F","IconScout","icon-scout","44bdf34f-2678-46eb-b8d0-b7bab1bb7fe1.webp","Your One-Stop Marketplace for Design Assets",{"url":147,"name":148,"slug":149,"cover":150,"tagline":151},"https:\u002F\u002Ffeathericons.com\u002F","Feather","feather","screenshots\u002Ffeather.webp","The Epitome of Open-Source Minimalist Icons",{"url":153,"name":154,"slug":155,"cover":156,"tagline":157},"https:\u002F\u002Fheroicons.com\u002F","Heroicons","heroicons","c82d4bb9-2a9b-4e90-9f27-54e1f3f29ecf.webp","Heroicons is an SVG icon library created by the developers of Tailwind CSS, featuring 316 handcrafted icons under the MIT open-source license, optimized for React and Vue frameworks.",{"url":159,"name":160,"slug":161,"cover":162,"tagline":163},"https:\u002F\u002Flordicon.com\u002F","Lordicon","lordicon","a7741a99-07b4-422f-a6f0-687867a87bb6.webp","The Animated Icon Library for Micro-interactions",[165,176,186],{"url":166,"icon":10,"name":167,"slug":168,"tags":169,"cover":173,"tagline":174,"is_featured":73,"date_created":175,"date_updated":10},"https:\u002F\u002Fmacaron-elements.com","Macaron","macaron",[170,171,172],{"seo":10,"name":49,"slug":36},{"seo":10,"name":10,"slug":68},{"seo":10,"name":10,"slug":42},"d4005d4f-7a50-4fc7-9301-61601da5fe64.webp","Free collection of SVG UI elements and design assets","2026-06-23T07:39:09.834107+00:00",{"url":177,"icon":10,"name":178,"slug":179,"tags":180,"cover":183,"tagline":184,"is_featured":73,"date_created":185,"date_updated":10},"https:\u002F\u002Fvectorwiki.com","VectorWiki","vectorwiki",[181,182],{"seo":10,"name":49,"slug":36},{"seo":10,"name":10,"slug":42},"84ecddf4-e16b-4453-a9cc-eeaa05fc56aa.webp","Search engine for thousands of free SVG vector icons","2026-06-23T07:38:54.670067+00:00",{"url":187,"icon":10,"name":188,"slug":189,"tags":190,"cover":193,"tagline":194,"is_featured":73,"date_created":195,"date_updated":10},"https:\u002F\u002Fappicon.co","App Icon Generator","app-icon-generator",[191,192],{"seo":10,"name":49,"slug":36},{"seo":10,"name":10,"slug":42},"82194b8b-b69e-4581-ae90-22fb170f8c28.webp","Generate all required app icon sizes from one image","2026-06-23T06:35:18.941563+00:00"]