--- url: /styles/icons/designing-icons.md description: Icons are small symbols to easily identify actions and categories --- # Icons Icons are small symbols to easily identify actions and categories [Overview](overview.md) · **Designing icons** · [Applying icons](applying-icons.md) ## Design principles Icons are an essential element of any interface, packing an informative punch into a small form factor. They’re designed to be simple, modern, friendly, and sometimes quirky. To ensure consistency and readability, their limited size means that each icon must strictly adhere to guidance while still expressing essential characteristics. ::: tip Do ![Front view of boat icon.](/assets/bea2d812-mlhi79a8-1.NPOe-KAM.webp) Simplify icons for greater clarity and legibility ::: ::: danger Don't ![Boat image with sails, mast, and flag.](/assets/1906b015-mlhi8n00-2.aim4a4hp.webp) Don’t be overly literal. Avoid complex icons. ::: ::: tip Do ![Use geometric, consistent shapes.](/assets/7c928dd0-mlhi9wll-3.5YGm2fl7.webp) Make icons graphic and bold ::: ::: danger Don't ![Detailed thumbs-up icon with contoured fingers in outline.](/assets/0d94a58f-mlhiaure-4.83w6HQD-.webp) Don’t use delicate or loose organic shapes ::: ::: tip Do ![Four icons with a consistent style.](/assets/404e5186-mlhibyvj-5.y26iWTFY.webp) Use and maintain a consistent visual style throughout one icon set ::: ::: danger Don't ![Four icons with a inconsistent styles.](/assets/c9b0a616-mlhicb7v-6.BiBun_SV.webp) Avoid mixing styles for one icon set ::: ## Icon sizes and layout ### Standard (Baseline) icon size Standard icons are displayed as 24dp x 24dp. For pixel-perfect accuracy, create icons for viewing at 100% scale. ![Icon at 100% scale on a 24dp grid.](/assets/54fa20d7-mlhid657-7.CDK8Uc87.webp) 24dp grid at 100% scale ![Icon at 1000% scale on a 24dp grid.](/assets/4ab6c263-mlhiddsr-8.DXTa5Z0B.webp) 24dp grid at 1000% scale ### Additional optical icon sizes Icons support additional sizes: 20dp, 40dp, and 48dp, with 20dp primarily for desktop, dense layouts, and small scale visuals, and 40dp and 48dp optimized for display or headline type, plus larger screen sizes. ![Four document icons shown at increasing scales.](/assets/520d9045-mlhidx2o-9.DSwrdB1o.webp) Supported icon sizes: 20dp, 24dp, 40dp, and 48dp ### Standard (Baseline) icon layout Icon content should remain inside of the **live area**, which is the region of an image that is unlikely to be hidden from view (such as an area where sidebars appear upon scrolling). If additional visual weight is needed, content may extend into the padding between the live area and the **trim area** (the complete size of a graphic). No parts of the icon should extend outside of the trim area. ![A 24dp-by-24dp icon grid with the 20dp-by-20dp live area highlighted.](/assets/9a29d914-mlhienpf-10.B2BHphAS.webp) **Live area** Icon content is limited to the 20dp x 20dp live area, with 2dp of padding around the perimeter ![A 24dp-by-24dp icon grid with the inner 2dp padding highlighted.](/assets/10b5a58b-mlhievo4-11.CujLZm4v.webp) **Padding** 2dp of padding surrounds the live area ::: tip Do ![A 24dp-by-24dp icon grid with the inner 2dp padding highlighted.](/assets/6cdcdd6d-mlhifrut-12.SbTN0jbT.webp) Icon content is limited to the 20dp-x-20dp live area, with 2dp of padding around the perimeter ::: ::: warning Caution ![Icon using live area and trim area.](/assets/5a107b4e-mlhig0cg-13.CK10BtLr.webp) If additional visual weight is needed, content may extend into the padding between the live area and the trim area ::: ::: danger Don't ![Icon exceeding trim area.](/assets/d9c3b1c7-mlhig8hf-14._v2a94Jd.webp) No parts of the icon should extend outside of the trim area ::: ## Grid and keyline shapes ### Icon design template If your design requires an icon that isn’t covered by the over 2,000 variations in [Google Font’s icon library](https://fonts.google.com/icons), you may want to create your own. [Download this 24dp keyline template](https://storage.googleapis.com/material-io-design/downloads/gm_icon_template.ai.zip)\* (ZIP file) to design custom icons in Adobe Illustrator. *\*This template is available under *[*Apache 2.0*](https://www.apache.org/licenses/LICENSE-2.0.html)*. By downloading this file, you agree to the *[*Google Terms of Service*](https://policies.google.com/terms)*. The *[*Google Privacy Policy*](https://policies.google.com/privacy)* describes how data is handled in this service.* ### Icon grid and keyline The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements.  Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain consistent visual proportions across system icons. ![A 24dp-by-24dp icon grid.](/assets/9e9f6d78-mlhihomb-15.7PNrInDY.webp) Grid ![A 24dp-by-24dp grid of foundational icon keylines: square, circle, vertical rectangle, horizontal rectangle.](/assets/6e8491a5-mlhihvvy-16.b-LJs3mR.webp) 24dp grid at 1000% scale ![A 24dp-by-24dp grid of foundational icon keylines with the square keyline highlighted.](/assets/78b7a80a-mlhiiy4c-17.DtTG4oR2.webp) Square height and width, 18dp ![Add chart icon on square keyline.](/assets/59a8e644-mlhij5mm-18.eMAB5oXM.webp) Icon drawn using square keyline ![A 24dp-by-24dp grid of foundational icon keylines with the circle keyline highlighted.](/assets/debca8a4-mlhijf4f-19.CSd9jw32.webp) Circle diameter, 20dp ![Globe icon on circle keyline.](/assets/7eb1c4c8-mlhijo1a-20.BDSfg4rd.webp) Icon drawn using circle keyline ![A 24dp-by-24dp grid of foundational icon keylines with the vertical rectangle keyline highlighted.](/assets/44ad95cf-mlhikriz-21.Biu7tNrO.webp) Vertical rectangle height, 20dp, and width, 16dp ![Document icon on vertical rectangle keyline.](/assets/48c89160-mlhikzyl-22.DhBdiOsA.webp) Icon drawn using vertical rectangle keyline ![A 24dp-by-24dp grid of foundational icon keylines with the horizontal keyline highlighted.](/assets/7fcfc158-mlhil8ui-23.CpXoZmis.webp) Horizontal rectangle height, 16dp, and width, 20dp ![Envelope icon on horizontal rectangle keyline.](/assets/89aba0c8-mlhilh5g-24.g7Go3ZRO.webp) Icon drawn using horizontal rectangle keyline ::: tip Do ![Icon grid including a folder icon aligning to the grid. X and Y placement coordinates are shown using integers.](/assets/eb116d66-mlhilpjf-25.CHzeaE4u.webp) Position icons “on pixel” within the icon grid ::: ::: danger Don't ![Icon grid including a folder icon misaligned to the grid with X and Y placement coordinates shown using decimals.](/assets/cfc1313d-mlhilynz-26.CFf1F_Lb.webp) Don’t place the icon on a coordinate that isn’t “on pixel” ::: ## Icon metrics ### Anatomy ![Diagram of a calendar icon on a grid highlighting six different elements.](/assets/71462697-mlhird2l-27.DOJZgYMu.webp) 1. Corner 2. Stroke terminal 3. Counter stroke 4. Stroke 5. Counter area 6. Bounding area ### Corners Corner radii are 2dp by default. For the outlined style symbols, interior corners are square, not rounded. For shapes 2dp wide or less, stroke corners shouldn’t be rounded. For the rounded style symbols, both exterior and interior corner radii are rounded and for the sharp style symbols, both exterior and interior corners radii reduce from 2dp to 0dp. ![Credit card symbol placed on grid with 2dp rounded exterior corners highlighted.](/assets/a90cf61d-mlhiwgza-28.tkJZknJI.webp) Exterior corners with 2dp corner radii ![Credit card symbol placed on grid with 2dp linear interior corners highlighted.](/assets/cb1a032f-mlhis0bd-29.DK8ks-7h.webp) Interior corners shouldn’t be rounded ::: warning Caution ![Document icon placed on grid with overly rounded corners highlighted.](/assets/f2904089-mlhiswrw-30-caution.DOKYQ2Uq.webp) Overly round corners reduces the symbol’s legibility ::: ::: danger Don't ![‘Add more’ icon placed on grid with inconsistent rounded corners.](/assets/b4a0d033-mlhit41a-31-dont.DxwRMHF4.webp) Don’t use inconsistent corner radii ::: ### Weight and stroke The recommended stroke weight for icons is 2dp or the regular weight (400), which includes curves, angles, and both interior and exterior strokes. Material Symbols can provide a range of weights between thin (100) and bold (700). ![Regular stroke weight timer icon placed on a grid.](/assets/9d9f4611-mlhitcv2-32.B8C4TQfA.webp) Timer icon at the regular stroke weight (400) ![Weight timer symbols ranging from 100 to 700 weight.](/assets/f24b46ee-mlhitln3-33.AzR7BqII.webp) Timer symbol shown across a 100–700 weight range ![Arrow symbol placed on a grid with arrowhead terminals trimmed to 45 degrees highlighted.](/assets/ec7b441d-mlhituxl-34.DVZ97Ogj.webp) Stroke terminal on an icon ![Add circle symbol placed on grid with linear 2dp inner stroke highlighted.](/assets/3ab00e77-mlhiu2ur-35.CcvGf7K_.webp) Counter stroke on an icon ![Add chart icon placed on grid with consistent stroke weights and squared stroke terminals.](/assets/0e920387-mlhiucam-36.djFgH3Z0.webp) Use consistent stroke weights and squared stroke terminals ![Add chart icon placed on grid showing inconsistent stroke weights and rounded stroke terminals.](/assets/74f56b64-mlhiukep-37.DqYaLio7.webp) Don’t use inconsistent stroke weights or rounded stroke terminals ### Complex icon shapes If an icon requires complex details, subtle adjustments can be made to improve its legibility. These adjustments are referred to as optical corrections. Any optical correction should use the geometric forms on which all other icons are based, without skewing or distorting those shapes. ![Paperclip icon on grid with adjusted 1.5dp stroke highlighted.](/assets/abd5d9ba-mlhiv5yo-38.CKrzkWci.webp) The paperclip icon uses 1.5dp of the possible 2dp stroke area to fit multiple curves within the 24dp x 24dp icon space ![Ramen bowl icon on grid with adjusted 1.5dp stroke highlighted.](/assets/37ee325e-mlhivf9f-39.CQzDcUn1.webp) The ramen bowl icon uses 1.5dp stroke and 2dp stroke together within the 24 x 24dp icon space ::: tip Do ![Building icon using flat shapes.](/assets/3cf30d57-mlhivoad-40.CeyHnAXp.webp) Make icons face forward ::: ::: danger Don't ![Building icon in isometric perspective.](/assets/5d765bf2-mlhivybg-41.BqpZ7Ogz.webp) Don’t tilt, rotate, or make icons appear dimensional :::