# Adding Icons
If you visit my [[Welcome]] page or the *Overview* page of each category, you will notice that there is a little pin icon (<span class="material-symbols-outlined">Keep</span>) next to the heading.
This was implemented using a custom class called in ```publish.css``` and a ```<span>``` tag on the page:
```HTML
<h1>Welcome <span class="material-symbols-outlined">Keep</span> </h1>
```
``` CSS
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
...
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-size: 28px;
color: var(--h1);
display: inline-block;
transform: rotate(45deg);
font-weight: 700;
vertical-align: middle;
margin-bottom: 4px;
}
```
By importing the font family you can now also use other symbols as can be found on Google's [Google Font](https://fonts.google.com/icons). Below you can find some examples:
<p class="material-symbols-thin">keep</p>
<p class="material-symbols-thin">group</p>
<p class="material-symbols-thin">chess</p>
<p class="material-symbols-thin"> sentiment_very_dissatisfied</p>
<p class="material-symbols-thin">keep</p>