Icons
An icon is a visual representation of a command, device, directory, or common action.
General Icons
In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below.
-
icon-academic-cap -
icon-adjustments -
icon-akamai -
icon-annotation -
icon-anonymous -
icon-archive -
icon-arrow-circle-down -
icon-arrow-circle-left -
icon-arrow-circle-right -
icon-arrow-circle-up -
icon-arrow-down -
icon-arrow-expand -
icon-arrow-left -
icon-arrow-narrow-down -
icon-arrow-narrow-left -
icon-arrow-narrow-right -
icon-arrow-narrow-up -
icon-arrow-right -
icon-arrow-sm-down -
icon-arrow-sm-left -
icon-arrow-sm-right -
icon-arrow-sm-up -
icon-arrow-up -
icon-astro -
icon-at-symbol -
icon-backspace -
icon-badge-check -
icon-ban -
icon-beaker -
icon-bell -
icon-bitBucket -
icon-book-open -
icon-bookmark-alt -
icon-bookmark -
icon-briefcase -
icon-cake -
icon-calculator -
icon-calendar -
icon-camera -
icon-cash -
icon-chart-bar -
icon-chart-pie -
icon-chart-square-bar -
icon-chat-alt-2 -
icon-chat-alt -
icon-chat -
icon-check-circle -
icon-check -
icon-cheveron-down -
icon-cheveron-left -
icon-cheveron-right -
icon-cheveron-up -
icon-chevron-double-down -
icon-chevron-double-left -
icon-chevron-double-right -
icon-chevron-double-up -
icon-chip -
icon-clipboard-arrow -
icon-clipboard-check -
icon-clipboard-copy -
icon-clipboard-list -
icon-clock -
icon-cloud-download -
icon-cloud-upload -
icon-cloud -
icon-cog -
icon-collection -
icon-color-swatch -
icon-credit-card -
icon-cube-transparent -
icon-cube -
icon-currency-bangladesh -
icon-currency-dollar -
icon-currency-euro -
icon-currency-pound -
icon-currency-rupee -
icon-currency-yen -
icon-cursor-click -
icon-database -
icon-desktop-computer -
icon-device-ipad -
icon-device-mobile -
icon-document-add -
icon-document-download -
icon-document-duplicate -
icon-document-remove -
icon-document-report -
icon-document-search -
icon-document-text -
icon-document -
icon-dots-circle-horizontal -
icon-dots-horizontal -
icon-dots-vertical -
icon-download -
icon-duplicate -
icon-emoji-happy -
icon-emoji-sad -
icon-exclamation-circle -
icon-exclamation -
icon-external-link -
icon-eye-off -
icon-eye -
icon-fast-forward -
icon-film -
icon-filter-line -
icon-filter -
icon-finger-print -
icon-flag -
icon-folder-add -
icon-folder-download -
icon-folder-open -
icon-folder-remove -
icon-folder -
icon-gift -
icon-git-branch -
icon-git-commit -
icon-globe-alt -
icon-globe -
icon-graphql -
icon-hand -
icon-hashtag -
icon-heart -
icon-home -
icon-identification -
icon-inbox-in -
icon-inbox -
icon-info -
icon-ionic -
icon-key -
icon-light-bulb -
icon-lightning-bolt -
icon-list -
icon-location-marker -
icon-lock-closed -
icon-lock-open -
icon-logout-left -
icon-logout-right -
icon-mail-open -
icon-mail -
icon-map -
icon-md-library -
icon-menu-alt-1 -
icon-menu-alt-2 -
icon-menu-alt-3 -
icon-menu-alt-4 -
icon-menu -
icon-microphone -
icon-minus-circle -
icon-minus-sm -
icon-minus -
icon-mode -
icon-moon -
icon-ms_yammer -
icon-msg91 -
icon-music-note -
icon-newspaper -
icon-nextjs -
icon-node_js -
icon-null -
icon-nuxt -
icon-office-building -
icon-openid -
icon-paper-airplane -
icon-paper-clip -
icon-pause -
icon-pencil-alt -
icon-pencil -
icon-phone-incoming -
icon-phone-missed-call -
icon-phone-outgoing -
icon-phone -
icon-photograph -
icon-play-button -
icon-play -
icon-plus-circle -
icon-plus-sm -
icon-plus -
icon-presentation-chart-1 -
icon-presentation-chart-2 -
icon-printer -
icon-product_hunt -
icon-puzzle -
icon-qrcode -
icon-question-mark-circle -
icon-qwik -
icon-react-native -
icon-receipt-refund -
icon-receipt-tax -
icon-refresh -
icon-relation -
icon-relationship -
icon-replay -
icon-rewind -
icon-rss -
icon-save-as -
icon-save -
icon-scale -
icon-scissors -
icon-search-circle -
icon-selector -
icon-send -
icon-server -
icon-share -
icon-shield-check -
icon-shield-exclamation -
icon-shopping-bag -
icon-shopping-cart -
icon-solidjs -
icon-sort-ascending -
icon-sort-descending -
icon-sparkles -
icon-speakerphone -
icon-spin -
icon-star -
icon-status-offline -
icon-status-online -
icon-stop -
icon-sun -
icon-support -
icon-svelte -
icon-switch-horizontal -
icon-switch-vertical -
icon-table -
icon-telesign -
icon-template -
icon-terminal -
icon-text -
icon-textmagic -
icon-thumb-dowm -
icon-thumb-up -
icon-ticket -
icon-toggle -
icon-translate -
icon-trash -
icon-trending-down -
icon-trending-up -
icon-truck -
icon-twilio -
icon-typescript -
icon-upload -
icon-user-add -
icon-user-circle -
icon-user-group -
icon-user-remove -
icon-user -
icon-users -
icon-variable -
icon-video-camera -
icon-video -
icon-view-boards -
icon-view-grid-add -
icon-view-grid -
icon-view-list -
icon-volume-off -
icon-volume-up -
icon-vonage -
icon-wifi -
icon-x-circle -
icon-zoom-in -
icon-zoom-out
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-algolia -
icon-amazon -
icon-android -
icon-angular -
icon-apple -
icon-appwrite -
icon-auth0 -
icon-authentik -
icon-autodesk -
icon-azure -
icon-behance -
icon-bitbucket -
icon-bitly -
icon-box -
icon-bun-sh -
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-meilisearch -
icon-microsoft -
icon-microsoft_edge -
icon-node -
icon-notion -
icon-okta -
icon-open-ai -
icon-opera -
icon-pangea -
icon-paypal -
icon-perspective-api -
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-algolia -
icon-amazon -
icon-android -
icon-angular -
icon-apple -
icon-appwrite -
icon-auth0 -
icon-authentik -
icon-autodesk -
icon-azure -
icon-behance -
icon-bitbucket -
icon-bitly -
icon-box -
icon-bun-sh -
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-meilisearch -
icon-microsoft -
icon-microsoft_edge -
icon-node -
icon-notion -
icon-okta -
icon-open-ai -
icon-opera -
icon-pangea -
icon-paypal -
icon-perspective-api -
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-algolia -
icon-amazon -
icon-android -
icon-angular -
icon-apple -
icon-appwrite -
icon-auth0 -
icon-authentik -
icon-autodesk -
icon-azure -
icon-behance -
icon-bitbucket -
icon-bitly -
icon-box -
icon-bun-sh -
icon-chrome -
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-meilisearch -
icon-microsoft -
icon-microsoft_edge -
icon-node -
icon-notion -
icon-okta -
icon-open-ai -
icon-opera -
icon-pangea -
icon-paypal -
icon-perspective-api -
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-tumbler -
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-algolia -
icon-amazon -
icon-android -
icon-angular -
icon-apple -
icon-appwrite -
icon-auth0 -
icon-authentik -
icon-autodesk -
icon-azure -
icon-behance -
icon-bitbucket -
icon-bitly -
icon-box -
icon-bun-sh -
icon-chrome -
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-meilisearch -
icon-microsoft -
icon-microsoft_edge -
icon-node -
icon-notion -
icon-okta -
icon-open-ai -
icon-opera -
icon-pangea -
icon-paypal -
icon-perspective-api -
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-tumbler -
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.