linkHow to Use
graphis is a font you can simply download and install, serve on your website, etc. In any context that the font setting is set to graphis, you can copy and paste one of the icons and you're good to go.
Glyphs are mapped to special characters and emojis that do resemble the intended icon, so in cases that the font is not present, still meaningful content will be displayed.
graphis is designed around thin strokes, which means it works better alongside text font that has also thin strokes. It is recommended to use it alongside font families light or extra-light weights, and set text that is immediately adjacent to graphis icons to these weights. I personally recommend Nunito Sans 300 for optimal visual results.
linkUsing the Web Font
1link<link rel="stylesheet" href="https://unpkg.com/graphis/font/graphis.css">
1linkfont-family: 'graphis', sans-serif;
You can use the font on elements that are supposed to only contain icons:
1linki {
2link font-family: 'graphis', sans-serif;
3link font-style: normal;
4link font-size: 1.2em;
5link}
1link<h1><i>👤</i> Account</h1>
👤 Account
You can also use it globally alongside another font family for text:
1linkbody, * {
2link font-family: 'graphis', 'Nunito Sans', sans-serif;
3link}
1linkNow you can have 👤 icons alongside text
2link<input placeholder="🔍 Or in inputs" type="email"/>
3link<br>
4link<button>Or in Buttons 🔒</button>
Now you can have 👤 icons alongside text