Icons
An icon is a visual representation of a command, device, directory, or common action.
General Icons
In Appwrite we use the heroicons library. By following the steps below, you can easily include all icons in your projects:
Navigate to Heroicons website
Navigate to heroicons and make sure you are looking at the solid icons. Select an icon and copy its name.
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.
-
icon-amazon
-
icon-android
-
icon-angular
-
icon-apple
-
icon-auth0
-
icon-authentik
-
icon-autodesk
-
icon-behance
-
icon-bitbucket
-
icon-bitly
-
icon-box
-
icon-code
-
icon-cpp
-
icon-css3
-
icon-dailymotion
-
icon-dart
-
icon-deno
-
icon-discord
-
icon-disqus
-
icon-docker
-
icon-dotnet
-
icon-dribbble
-
icon-dropbox
-
icon-etsy
-
icon-facebook
-
icon-figma
-
icon-firefox
-
icon-flutter
-
icon-git
-
icon-github
-
icon-gitlab
-
icon-google
-
icon-html5
-
icon-instagram
-
icon-ios
-
icon-java
-
icon-js
-
icon-kotlin
-
icon-linkedin
-
icon-linux
-
icon-medium
-
icon-microsoft
-
icon-microsoft_edge
-
icon-node
-
icon-notion
-
icon-okta
-
icon-opera
-
icon-paypal
-
icon-php
-
icon-pinterest
-
icon-podio
-
icon-python
-
icon-react
-
icon-reddit
-
icon-ruby
-
icon-safari
-
icon-salesforce
-
icon-skype
-
icon-slack
-
icon-spotify
-
icon-stripe
-
icon-swift
-
icon-telegram
-
icon-tiktok
-
icon-tradeshift
-
icon-tumbir
-
icon-twitch
-
icon-twitter
-
icon-unity
-
icon-vimeo
-
icon-vk
-
icon-vs_code
-
icon-vue
-
icon-whatsapp
-
icon-wordpress
-
icon-yahoo
-
icon-yammer
-
icon-yandex
-
icon-ycombinator
-
icon-youtube
-
icon-zoom
-
icon-amazon
-
icon-android
-
icon-angular
-
icon-apple
-
icon-auth0
-
icon-authentik
-
icon-autodesk
-
icon-behance
-
icon-bitbucket
-
icon-bitly
-
icon-box
-
icon-code
-
icon-cpp
-
icon-css3
-
icon-dailymotion
-
icon-dart
-
icon-deno
-
icon-discord
-
icon-disqus
-
icon-docker
-
icon-dotnet
-
icon-dribbble
-
icon-dropbox
-
icon-etsy
-
icon-facebook
-
icon-figma
-
icon-firefox
-
icon-flutter
-
icon-git
-
icon-github
-
icon-gitlab
-
icon-google
-
icon-html5
-
icon-instagram
-
icon-ios
-
icon-java
-
icon-js
-
icon-kotlin
-
icon-linkedin
-
icon-linux
-
icon-medium
-
icon-microsoft
-
icon-microsoft_edge
-
icon-node
-
icon-notion
-
icon-okta
-
icon-opera
-
icon-paypal
-
icon-php
-
icon-pinterest
-
icon-podio
-
icon-python
-
icon-react
-
icon-reddit
-
icon-ruby
-
icon-safari
-
icon-salesforce
-
icon-skype
-
icon-slack
-
icon-spotify
-
icon-stripe
-
icon-swift
-
icon-telegram
-
icon-tiktok
-
icon-tradeshift
-
icon-tumbir
-
icon-twitch
-
icon-twitter
-
icon-unity
-
icon-vimeo
-
icon-vk
-
icon-vs_code
-
icon-vue
-
icon-whatsapp
-
icon-wordpress
-
icon-yahoo
-
icon-yammer
-
icon-yandex
-
icon-ycombinator
-
icon-youtube
-
icon-zoom
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.