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-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-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.