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-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-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
  • icon-finger-print
  • icon-flag
  • icon-folder-add
  • icon-folder-download
  • icon-folder-open
  • icon-folder-remove
  • icon-folder
  • icon-gift
  • icon-globe-alt
  • icon-globe
  • icon-hand
  • icon-hashtag
  • icon-heart
  • icon-home
  • icon-identification
  • icon-inbox-in
  • icon-inbox
  • icon-info
  • icon-key
  • icon-light-bulb
  • icon-lightning-bolt
  • 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-moon
  • icon-ms_yammer
  • icon-music-note
  • icon-newspaper
  • icon-node_js
  • icon-office-building
  • 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
  • icon-plus-circle
  • icon-plus-sm
  • icon-plus
  • icon-presentation-chart-1
  • icon-presentation-chart-2
  • icon-printer
  • icon-puzzle
  • icon-qrcode
  • icon-question-mark-circle
  • icon-receipt-refund
  • icon-receipt-tax
  • icon-refresh
  • icon-replay
  • icon-rewind
  • icon-rss
  • icon-save-as
  • icon-save
  • icon-scale
  • icon-scissors
  • icon-search-circle
  • icon-search
  • icon-selector
  • 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-star
  • icon-status-offline
  • icon-status-online
  • icon-stop
  • icon-sun
  • icon-support
  • icon-switch-horizontal
  • icon-switch-vertical
  • icon-table
  • icon-template
  • icon-terminal
  • icon-thumb-dowm
  • icon-thumb-up
  • icon-ticket
  • icon-translate
  • icon-trash
  • icon-trending-down
  • icon-trending-up
  • icon-truck
  • icon-upload
  • icon-user-add
  • icon-user-circle
  • icon-user-group
  • icon-user-remove
  • icon-user
  • icon-users
  • icon-variable
  • icon-video-camera
  • icon-view-boards
  • icon-view-grid-add
  • icon-view-grid
  • icon-view-list
  • icon-volume-off
  • icon-volume-up
  • 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-amazon
    icon-amazon
  • icon-android
    icon-android
  • icon-angular
    icon-angular
  • icon-apple
    icon-apple
  • icon-auth0
    icon-auth0
  • icon-authentik
    icon-authentik
  • icon-autodesk
    icon-autodesk
  • icon-behance
    icon-behance
  • icon-bitbucket
    icon-bitbucket
  • icon-bitly
    icon-bitly
  • icon-box
    icon-box
  • icon-code
    icon-code
  • icon-cpp
    icon-cpp
  • icon-css3
    icon-css3
  • icon-dailymotion
    icon-dailymotion
  • icon-dart
    icon-dart
  • icon-deno
    icon-deno
  • icon-discord
    icon-discord
  • icon-disqus
    icon-disqus
  • icon-docker
    icon-docker
  • icon-dotnet
    icon-dotnet
  • icon-dribbble
    icon-dribbble
  • icon-dropbox
    icon-dropbox
  • icon-etsy
    icon-etsy
  • icon-facebook
    icon-facebook
  • icon-figma
    icon-figma
  • icon-firefox
    icon-firefox
  • icon-flutter
    icon-flutter
  • icon-git
    icon-git
  • icon-github
    icon-github
  • icon-gitlab
    icon-gitlab
  • icon-google
    icon-google
  • icon-html5
    icon-html5
  • icon-instagram
    icon-instagram
  • icon-ios
    icon-ios
  • icon-java
    icon-java
  • icon-js
    icon-js
  • icon-kotlin
    icon-kotlin
  • icon-linkedin
    icon-linkedin
  • icon-linux
    icon-linux
  • icon-medium
    icon-medium
  • icon-microsoft
    icon-microsoft
  • icon-microsoft_edge
    icon-microsoft_edge
  • icon-node
    icon-node
  • icon-notion
    icon-notion
  • icon-okta
    icon-okta
  • icon-opera
    icon-opera
  • icon-paypal
    icon-paypal
  • icon-php
    icon-php
  • icon-pinterest
    icon-pinterest
  • icon-podio
    icon-podio
  • icon-python
    icon-python
  • icon-react
    icon-react
  • icon-reddit
    icon-reddit
  • icon-ruby
    icon-ruby
  • icon-safari
    icon-safari
  • icon-salesforce
    icon-salesforce
  • icon-skype
    icon-skype
  • icon-slack
    icon-slack
  • icon-spotify
    icon-spotify
  • icon-stripe
    icon-stripe
  • icon-swift
    icon-swift
  • icon-telegram
    icon-telegram
  • icon-tiktok
    icon-tiktok
  • icon-tradeshift
    icon-tradeshift
  • icon-tumbir
    icon-tumbir
  • icon-twitch
    icon-twitch
  • icon-twitter
    icon-twitter
  • icon-unity
    icon-unity
  • icon-vimeo
    icon-vimeo
  • icon-vk
    icon-vk
  • icon-vs_code
    icon-vs_code
  • icon-vue
    icon-vue
  • icon-whatsapp
    icon-whatsapp
  • icon-wordpress
    icon-wordpress
  • icon-yahoo
    icon-yahoo
  • icon-yammer
    icon-yammer
  • icon-yandex
    icon-yandex
  • icon-ycombinator
    icon-ycombinator
  • icon-youtube
    icon-youtube
  • icon-zoom
    icon-zoom
  • icon-amazon
    icon-amazon
  • icon-android
    icon-android
  • icon-angular
    icon-angular
  • icon-apple
    icon-apple
  • icon-auth0
    icon-auth0
  • icon-authentik
    icon-authentik
  • icon-autodesk
    icon-autodesk
  • icon-behance
    icon-behance
  • icon-bitbucket
    icon-bitbucket
  • icon-bitly
    icon-bitly
  • icon-box
    icon-box
  • icon-code
    icon-code
  • icon-cpp
    icon-cpp
  • icon-css3
    icon-css3
  • icon-dailymotion
    icon-dailymotion
  • icon-dart
    icon-dart
  • icon-deno
    icon-deno
  • icon-discord
    icon-discord
  • icon-disqus
    icon-disqus
  • icon-docker
    icon-docker
  • icon-dotnet
    icon-dotnet
  • icon-dribbble
    icon-dribbble
  • icon-dropbox
    icon-dropbox
  • icon-etsy
    icon-etsy
  • icon-facebook
    icon-facebook
  • icon-figma
    icon-figma
  • icon-firefox
    icon-firefox
  • icon-flutter
    icon-flutter
  • icon-git
    icon-git
  • icon-github
    icon-github
  • icon-gitlab
    icon-gitlab
  • icon-google
    icon-google
  • icon-html5
    icon-html5
  • icon-instagram
    icon-instagram
  • icon-ios
    icon-ios
  • icon-java
    icon-java
  • icon-js
    icon-js
  • icon-kotlin
    icon-kotlin
  • icon-linkedin
    icon-linkedin
  • icon-linux
    icon-linux
  • icon-medium
    icon-medium
  • icon-microsoft
    icon-microsoft
  • icon-microsoft_edge
    icon-microsoft_edge
  • icon-node
    icon-node
  • icon-notion
    icon-notion
  • icon-okta
    icon-okta
  • icon-opera
    icon-opera
  • icon-paypal
    icon-paypal
  • icon-php
    icon-php
  • icon-pinterest
    icon-pinterest
  • icon-podio
    icon-podio
  • icon-python
    icon-python
  • icon-react
    icon-react
  • icon-reddit
    icon-reddit
  • icon-ruby
    icon-ruby
  • icon-safari
    icon-safari
  • icon-salesforce
    icon-salesforce
  • icon-skype
    icon-skype
  • icon-slack
    icon-slack
  • icon-spotify
    icon-spotify
  • icon-stripe
    icon-stripe
  • icon-swift
    icon-swift
  • icon-telegram
    icon-telegram
  • icon-tiktok
    icon-tiktok
  • icon-tradeshift
    icon-tradeshift
  • icon-tumbir
    icon-tumbir
  • icon-twitch
    icon-twitch
  • icon-twitter
    icon-twitter
  • icon-unity
    icon-unity
  • icon-vimeo
    icon-vimeo
  • icon-vk
    icon-vk
  • icon-vs_code
    icon-vs_code
  • icon-vue
    icon-vue
  • icon-whatsapp
    icon-whatsapp
  • icon-wordpress
    icon-wordpress
  • icon-yahoo
    icon-yahoo
  • icon-yammer
    icon-yammer
  • icon-yandex
    icon-yandex
  • icon-ycombinator
    icon-ycombinator
  • icon-youtube
    icon-youtube
  • icon-zoom
    icon-zoom
  • icon-amazon
    icon-amazon
  • icon-android
    icon-android
  • icon-angular
    icon-angular
  • icon-apple
    icon-apple
  • icon-auth0
    icon-auth0
  • icon-authentik
    icon-authentik
  • icon-autodesk
    icon-autodesk
  • icon-behance
    icon-behance
  • icon-bitbucket
    icon-bitbucket
  • icon-bitly
    icon-bitly
  • icon-box
    icon-box
  • icon-chrome
    icon-chrome
  • icon-cpp
    icon-cpp
  • icon-css3
    icon-css3
  • icon-dailymotion
    icon-dailymotion
  • icon-dart
    icon-dart
  • icon-deno
    icon-deno
  • icon-discord
    icon-discord
  • icon-disqus
    icon-disqus
  • icon-docker
    icon-docker
  • icon-dotnet
    icon-dotnet
  • icon-dribbble
    icon-dribbble
  • icon-dropbox
    icon-dropbox
  • icon-etsy
    icon-etsy
  • icon-facebook
    icon-facebook
  • icon-figma
    icon-figma
  • icon-firefox
    icon-firefox
  • icon-flutter
    icon-flutter
  • icon-git
    icon-git
  • icon-github
    icon-github
  • icon-gitlab
    icon-gitlab
  • icon-google
    icon-google
  • icon-html5
    icon-html5
  • icon-instagram
    icon-instagram
  • icon-ios
    icon-ios
  • icon-java
    icon-java
  • icon-js
    icon-js
  • icon-kotlin
    icon-kotlin
  • icon-linkedin
    icon-linkedin
  • icon-linux
    icon-linux
  • icon-medium
    icon-medium
  • icon-microsoft
    icon-microsoft
  • icon-microsoft_edge
    icon-microsoft_edge
  • icon-node
    icon-node
  • icon-notion
    icon-notion
  • icon-okta
    icon-okta
  • icon-opera
    icon-opera
  • icon-paypal
    icon-paypal
  • icon-php
    icon-php
  • icon-pinterest
    icon-pinterest
  • icon-podio
    icon-podio
  • icon-python
    icon-python
  • icon-react
    icon-react
  • icon-reddit
    icon-reddit
  • icon-ruby
    icon-ruby
  • icon-safari
    icon-safari
  • icon-salesforce
    icon-salesforce
  • icon-skype
    icon-skype
  • icon-slack
    icon-slack
  • icon-spotify
    icon-spotify
  • icon-stripe
    icon-stripe
  • icon-swift
    icon-swift
  • icon-telegram
    icon-telegram
  • icon-tiktok
    icon-tiktok
  • icon-tradeshift
    icon-tradeshift
  • icon-tumbler
    icon-tumbler
  • icon-twitch
    icon-twitch
  • icon-twitter
    icon-twitter
  • icon-unity
    icon-unity
  • icon-vimeo
    icon-vimeo
  • icon-vk
    icon-vk
  • icon-vs_code
    icon-vs_code
  • icon-vue
    icon-vue
  • icon-whatsapp
    icon-whatsapp
  • icon-wordpress
    icon-wordpress
  • icon-yahoo
    icon-yahoo
  • icon-yammer
    icon-yammer
  • icon-yandex
    icon-yandex
  • icon-ycombinator
    icon-ycombinator
  • icon-youtube
    icon-youtube
  • icon-zoom
    icon-zoom
  • icon-amazon
    icon-amazon
  • icon-android
    icon-android
  • icon-angular
    icon-angular
  • icon-apple
    icon-apple
  • icon-auth0
    icon-auth0
  • icon-authentik
    icon-authentik
  • icon-autodesk
    icon-autodesk
  • icon-behance
    icon-behance
  • icon-bitbucket
    icon-bitbucket
  • icon-bitly
    icon-bitly
  • icon-box
    icon-box
  • icon-chrome
    icon-chrome
  • icon-cpp
    icon-cpp
  • icon-css3
    icon-css3
  • icon-dailymotion
    icon-dailymotion
  • icon-dart
    icon-dart
  • icon-deno
    icon-deno
  • icon-discord
    icon-discord
  • icon-disqus
    icon-disqus
  • icon-docker
    icon-docker
  • icon-dotnet
    icon-dotnet
  • icon-dribbble
    icon-dribbble
  • icon-dropbox
    icon-dropbox
  • icon-etsy
    icon-etsy
  • icon-facebook
    icon-facebook
  • icon-figma
    icon-figma
  • icon-firefox
    icon-firefox
  • icon-flutter
    icon-flutter
  • icon-git
    icon-git
  • icon-github
    icon-github
  • icon-gitlab
    icon-gitlab
  • icon-google
    icon-google
  • icon-html5
    icon-html5
  • icon-instagram
    icon-instagram
  • icon-ios
    icon-ios
  • icon-java
    icon-java
  • icon-js
    icon-js
  • icon-kotlin
    icon-kotlin
  • icon-linkedin
    icon-linkedin
  • icon-linux
    icon-linux
  • icon-medium
    icon-medium
  • icon-microsoft
    icon-microsoft
  • icon-microsoft_edge
    icon-microsoft_edge
  • icon-node
    icon-node
  • icon-notion
    icon-notion
  • icon-okta
    icon-okta
  • icon-opera
    icon-opera
  • icon-paypal
    icon-paypal
  • icon-php
    icon-php
  • icon-pinterest
    icon-pinterest
  • icon-podio
    icon-podio
  • icon-python
    icon-python
  • icon-react
    icon-react
  • icon-reddit
    icon-reddit
  • icon-ruby
    icon-ruby
  • icon-safari
    icon-safari
  • icon-salesforce
    icon-salesforce
  • icon-skype
    icon-skype
  • icon-slack
    icon-slack
  • icon-spotify
    icon-spotify
  • icon-stripe
    icon-stripe
  • icon-swift
    icon-swift
  • icon-telegram
    icon-telegram
  • icon-tiktok
    icon-tiktok
  • icon-tradeshift
    icon-tradeshift
  • icon-tumbler
    icon-tumbler
  • icon-twitch
    icon-twitch
  • icon-twitter
    icon-twitter
  • icon-unity
    icon-unity
  • icon-vimeo
    icon-vimeo
  • icon-vk
    icon-vk
  • icon-vs_code
    icon-vs_code
  • icon-vue
    icon-vue
  • icon-whatsapp
    icon-whatsapp
  • icon-wordpress
    icon-wordpress
  • icon-yahoo
    icon-yahoo
  • icon-yammer
    icon-yammer
  • icon-yandex
    icon-yandex
  • icon-ycombinator
    icon-ycombinator
  • icon-youtube
    icon-youtube
  • icon-zoom
    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.

 Input with a warning below
 Input with a warning below

Do

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

 Input with info below
 Input with info below

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.