

Weight and grade affect a symbol’s thickness. Weight can also affect the overall size of the symbol.

Weight defines the symbol’s stroke weight, with a range of weights between thin (100) and bold (700). ActionAlertAVCommunicationContentDeviceEditorFileHardwareHomeImageMapsMathNavigationNotificationPlacesSearchShoppingSocial. Along with the weight axis, the fill also impacts the look of the icon.

The values are 0 for default or 1 for completely filled. To convey a state transition, use the fill axis for animation or interaction. The 'G' favicon is also slightly reminiscent of the 1976 logo for Gymboree. The rebrand also introduced the new 'Google dots'. A single icon can render both unfilled and filled states. Following its logo change in 2015, the new Google icon now uses an uppercase 'G' (similar to the 1999 logo) with the four colors from the new main logo.
Google icons android#
They can be used by web, Android (Vector Drawable format), and iOS (Apple Symbols) developers, while “Flutter support for Material Symbols is planned.” A Figma plugin is also available.įill gives you the ability to modify the default icon style. Sharp Symbols use corners and straight edges for a crisp, rectangular style that remains legible even at smaller scales.Rounded Symbols use a corner radius that pairs well with brands that use heavier typography, curved logos, or circular elements to express their style.Outlined Symbols are a light, clean style that works well in dense UIs.
