CSS Google Icons
CSS
Google provides a large, free set of vector-based icons called Material Symbols.
Google Material Symbols
➔ Google Material Symbols are web-based icons that are free for personal and commercial use.
➔ Google provides the Material Symbol API and there are a large number of icons to choose from.
➔ Material symbols/icons that can be easily used with CSS.
How to link Google Material Symbols:
1. Add a stylesheet link inside head tag to load the Material Icons web font(s):
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2. Use the i tag as the symbol container, material-icons as the class name, and place the symbol name inside the container. Ex: <i class="material-icons">home</i>
Search for the symbol name from this link Find the symbol name
Example
<!DOCTYPE html>
<html>
<head>
<title>Google Material Symbols, Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h3>Google Material Symbols, Icons Example</h3>
<i class="material-icons">home</i>
<i class="material-icons" style="font-size:50px;">home</i>
<i class="material-icons" style="font-size:60px;color:red;">home</i>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
How to link Google Material Symbols (Recommended):
Latest Modern approach and Easy way.
1. Go to this link Select Google Icons Select the desired Google Material symbol.
2. Then, copy and paste the 'Variable Icon Font' or 'Static Icon Font' link tags (shown in the image below) into the head section of your code and then copy and paste the code from the 'Inserting the icon' section (shown in the image below) to anywhere in the html body section.
Image01 for 'Variable Icon Font'
Image02 for 'Static Icon Font'
Example
<!DOCTYPE html>
<html>
<head>
<title>Google Material Symbols, Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Symbol names are in alphabetical order -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,200,0,0&icon_names=close,favorite,home,menu,search,settings,star,start" />
</head>
<body>
<h3>Google Material Symbols, Icons Example</h3>
<span class="material-symbols-outlined">close</span>
<span class="material-symbols-outlined">favorite</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">menu</span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">star</span>
<span class="material-symbols-outlined">start</span>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html>
<head>
<title>Google Material Symbols, Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Symbol names are in alphabetical order -->
<!-- Use (Variable icon font link) OR (Static icon font link). Any of this will work. -->
<!-- Variable icon font -->
<!--
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=close,favorite,home,menu,search,settings,star,start" />
-->
<!-- Static icon font -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,200,0,0&icon_names=close,favorite,home,menu,search,settings,star,start" />
</head>
<body>
<h3>Google Material Symbols, Icons Example</h3>
<span class="material-symbols-outlined">close</span>
<span class="material-symbols-outlined">favorite</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">menu</span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">star</span>
<span class="material-symbols-outlined">start</span>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.