Icons

General Icons

In Appwrite we use the heroicons library. By following the steps below, you can easily include all icons in your projects:

1. Navigate to Heroicons website

   Navigate to heroicons and make sure you are looking at the solid icons. Select an icon and copy its name.

2. Use the selected icon

   In your code use a class, type icon- and paste the icon’s name right after.

Additional Icons

Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files.

Best Practice

We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label.

Do

Use minimum 4px of space between icon to text and make sure they are centered.

Don't

Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line.