Icons

Coder uses icons in several places, including ones that can be configured throughout the app, or specified in your Terraform. They're specified by a URL, which can be to an image hosted on a CDN of your own, or one of the icons that come bundled with your Coder deployment.

• Template Icons:

  • Make templates and workspaces visually recognizable with a relevant or memorable icon

• Terraform:

  • coder_app
  • coder_parameter and option blocks
  • coder_script
  • coder_metadata

  These can all be configured to use an icon by setting the icon field.

  data "coder_parameter" "my_parameter" {
    icon = "/icon/coder.svg"
  
    option {
      icon = "/emojis/1f3f3-fe0f-200d-26a7-fe0f.png"
    }
  }
  

• Authentication Providers:

  • Use icons for external authentication providers to make them recognizable. You can set an icon for each provider by setting the CODER_EXTERNAL_AUTH_X_ICON environment variable, where X is the number of the provider.

    CODER_EXTERNAL_AUTH_0_ICON=/icon/github.svg
    CODER_EXTERNAL_AUTH_1_ICON=/icon/google.svg
    

• Support Links:

  • Use icons for support links to make them recognizable. You can set the icon field for each link in CODER_SUPPORT_LINKS array.

Bundled icons

Coder is distributed with a bundle of icons for popular cloud providers and programming languages. You can see all of the icons (or suggest new ones) in our repository on GitHub.

You can also view the entire list, with search and previews, by navigating to /icons on your Coder deployment. E.g. https://coder.example.com/icons. This can be particularly useful in airgapped deployments.

External icons

You can use any image served over HTTPS as an icon, by specifying the full URL of the image. We recommend that you use a CDN that you control, but it can be served from any source that you trust.

You can also embed an image by using data: URLs.

• Only the https: and data: protocols are supported in icon URLs (not http:)

• Be careful when using images hosted by someone else; they might disappear or change!

• Be careful when using data: URLs. They can get rather large, and can negatively impact loading times for pages and queries they appear in. Only use them for very small icons that compress well.