We want the icons to feel recognizably Chrome, but also well crafted for each operating system. Download them for use in your digital products for Android, iOS, and web. The library also has delightful and beautifully crafted icons for common actions and items. Then we created OS-specific customizations. Google Fonts is a library of 1557 open source font families and APIs for convenient use via CSS and Android. We also found that placing certain shades of green and red next to each other created an unpleasant “glow” between the two colors, so we introduced a very subtle gradient to the main icon to make the icon easier to the eyes compared to using flat colors. How will the Chrome icon look different across operating systems?Įlvin: We simplified the main brand icon by removing the shadows, refining the proportions and brightening the colors, to align with Google's current brand design. We also noticed that the visual design of modern operating systems was becoming more stylistically diverse, so it was important that the Chrome icon felt more adaptable, native and fresh no matter what device you used. Once you have access to your local fonts, you can find any icon fonts in the font picker.Elvin: The logo hadn't been updated in eight years, and we wanted to give it a refreshed and modern look to reflect how Chrome has evolved as a product. Download the font helper to access local fonts in the browser.There are a few ways to access fonts from your device: If you have a different icon font installed on your device, you can still use these icon fonts in Figma.

Figma will display the icon in the canvas:.Paste the icon into your text object in Figma using the keyboard shortcut:.font scripts, placing Font Awesome in second place after Google Fonts. Based on your icon choice, use the font style field to select Regular or Solid: Font Awesome is a font and icon toolkit based on CSS and Less.Select the Font Awesome 5 Free font from the list.In the Text section of the properties panel, click the arrow next to the font.Right-click on the icon you want to use and select Copy from the menu to add it to your clipboard:.You'll need to update the font style in Figma to match: Use the tabs at the top of the page to choose between Solid or Regular Font Awesome icons.View and copy icons from the Font Awesome cheatsheet. Font Awesome is free to use, or you can purchase an extended range of icons.įont Awesome has both regular or solid versions of an icon. If an icon isn't showing up when you paste it, you may need to switch to the solid style to see the icon. Font Awesome iconsīy default, Figma supports Font Awesome, a popular set of icons in an easy-to-use font. Like regular text, icon fonts can be styled using CSS, which makes them popular in web development. Icon fonts are fonts that are made up of symbols, as opposed to regular letters and numbers.

You can add icons to your designs as actual images, or use an icon font.

Icons are images or symbols that represent specific actions or tools in an interface. You will need to have can edit access to a file to edit any text layers.

Cool google icons