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 a large collection of icons under the Material Symbol API for developers to choose from.
➔ Using Google Material symbols or icons with CSS, a developer can quickly complete design work.
How to link Google Material Symbols:
1. To load Material Icon web fonts, a stylesheet link is required inside the page's head tag:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2. The symbol container should have an `i` tag, `material-icons` as the class name, and 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>
<!-- uncomment bellow line for responsive design -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<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. Now copy the link tags under 'Variable Icon Font' or 'Static Icon Font' section shown in the image and paste them into the head section of your code. Also, copy the icon code (shown in the image below) from the 'Inserting the icon' section of the page and paste it inside the HTML body section at a location where the icon will appear.
Image01 for 'Variable Icon Font'
Image02 for 'Static Icon Font'
Example
<!DOCTYPE html>
<html>
<head>
<title>Google Material Symbols, Icons Example</title>
<!-- uncomment bellow line for responsive design -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- 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>
<!-- uncomment bellow line for responsive design -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- 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.