Custom icons
To accommodate your needs, you may need icons in your interface. These icons can replace the text or give it a meaning depending on the case. It is important to remain consistent between these icons as well as with the rest of your website.
We strongly recommend using icon packs like Lunar that respect all theses guidelines and will integrate perfectly in your website.
Create simple, recognizable designs. Too many details can make an icon appear sloppy or unreadable. Strive for a design most people will interpret correctly and won’t find offensive.
Keep your icons consistent. Whether you use only custom icons or mix custom and system icons, all icons in your website should be the same in terms of size, level of detail, perspective, and stroke weight.
Make sure icons are legible. In general, solid icons tend to be clearer than outlined icons. If an icon must includes lines, coordinate the weight with other icons and your site’s typography.
Use color to communicate selected and deselected states. Avoid toggling between two different icon designs, like a solid version and an outlined version.
Avoid including text in an icon. If you need to show text, display a label beneath the icon and adjust its placement accordingly.
Use vector graphics. When exporting your icons, please use the SVG format so that they rescale perfectly and are lightweight. PNG format is recommended only for intricate designs that require effects like shading, textures, and highlights.