Material file download icon

Sort by. Download whatever, cancel whenever. More info. How to attribute? Get you hands on Black Friday. Go Premium. Are you sure you want to delete this collection? Yes, delete it No, go back.

We are sorry you canceled your Premium subscription You can still enjoy Flaticon Collections with the following limits: You can choose only 3 collections to keep You can only add up to icons per collection You cannot add Premium icons to your collection.

The advantages of your collections changed You can choose only 3 collections to keep You can only add up to icons per collection You cannot add Premium icons to your collection.

Apply Discount. Select up to 3 collections to continue: You have 8 collections but can only unlock 3 of them. Stay Premium Save and continue. Please, indicate what problem has been found. The download is not working. The format of some files is incorrect. The download is taking too long. CSS background Icons made by Freepik from www. Copy this link in your website: Icons made by Freepik from flaticon.

The icon font weighs in at only 42KB in its smallest woff2 format and 56KB in standard woff format. By comparison, the SVG files compressed with gzip will generally be around 62KB in size, but this can be reduced considerably by compiling only the icons you need into a single SVG file with symbol sprites.

The easiest way to set up icon fonts for use in any web page is through Google Fonts. All you need to do is include a single line of HTML:. An additional CSS class will be declared called. Any element that uses this class will have the correct CSS to render these icons from the web font. For those looking to self host the web font, some additional setup is necessary.

In addition, the CSS rules for rendering the icon will need to be declared to render the font properly. These rules are normally served as part of the Google Web Font stylesheet, but will need to be included manually in your projects when self-hosting the font:.

This example uses a typographic feature called ligatures , which allows rendering of an icon glyph simply by using its textual name.

The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

For browsers that do not support ligatures, fall back to specifying the icons using numeric character references like the example below:. Find both the icon names and codepoints on the material icons library by selecting any icon and opening the icon font panel. Each icon font has a codepoints index in our git repository showing the complete set of names and character codes here. These icons were designed to follow the material design guidelines and they look best when using the recommended icon sizes and colors.

The styles below make it easy to apply our recommended sizes, colors, and activity states. Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines , we recommend them to be shown in either 18, 24, 36 or 48px. The default being 24px. Material icons look best at 24px, but if an icon needs to be displayed in an alternative size, using the above CSS rules can help:.

Using the icon font allows for easy styling of an icon in any color. The material icons are provided as SVGs that are suitable for web projects.

Individual icons are downloadable from the material icons library. The SVGs are also available from the material design icons git repository under the path:. If multiple icons are in use on a web site, creating spritesheets out of the images is recommended.

For more information, refer to the documentation in the sprites directory of the git repository. PNG is the most traditional way to display icons on the web. Our downloads from the material icons library provide both single and double densities for each icon. They are referred to as 1x and 2x respectively in the download.

Icons are also available in the git repository under:. For more information, refer to recommendations in the sprites directory in the git repository. PNGs suitable for Android are available from the material icons library. These come in all the supported screen densities so they should look good on any device. Sign in. Get it now. Material Icon Theme Philipp Kief. Copied to clipboard. Sponsored by File icons Folder icons Customize folder color You can change the color of the default folder icon using the command palette: or via user settings: "material-icon-theme.

Folder associations The following configuration can customize the folder icons. One-click activation After installation or update you can click on the 'Activate'-button to activate the icon theme, if you haven't already. Change Folder Color Change the color of the folder icons. Change Folder Theme Change the design of the folder icons. Change Opacity Change the opacity of the icons. Change Saturation Change the saturation value of the icons. Configure Icon Packs Select an icon pack that enables additional icons e.

Hide Folder Arrows Hides the arrows next to the folder icons. Restore Default Configuration Reset the default configurations of the icon theme.