|
| 1 | +#Icons |
| 2 | + |
| 3 | +--- |
| 4 | + |
| 5 | +Coder uses icons in several places, including ones that can be configured |
| 6 | +throughout the app, or specified in your Terraform. They're specified by a URL, |
| 7 | +which can be to an image hosted on a CDN of your own, or one of the icons that |
| 8 | +come bundled with your Coder deployment. |
| 9 | + |
| 10 | +-**Template Icons**: |
| 11 | + |
| 12 | +- Make templates and workspaces visually recognizable with a relevant or |
| 13 | + memorable icon |
| 14 | + |
| 15 | +-[**Terraform**](https://registry.terraform.io/providers/coder/coder/latest/docs): |
| 16 | + |
| 17 | +-[`coder_app`](https://registry.terraform.io/providers/coder/coder/latest/docs/resources/app#icon) |
| 18 | +-[`coder_parameter`](https://registry.terraform.io/providers/coder/coder/latest/docs/data-sources/parameter#icon) |
| 19 | + and |
| 20 | +[`option`](https://registry.terraform.io/providers/coder/coder/latest/docs/data-sources/parameter#nested-schema-for-option) |
| 21 | + blocks |
| 22 | +-[`coder_script`](https://registry.terraform.io/providers/coder/coder/latest/docs/resources/script#icon) |
| 23 | + |
| 24 | + These can all be configured to use an icon by setting the`icon` field. |
| 25 | + |
| 26 | +```terraform |
| 27 | + data "coder_parameter" "my_parameter" { |
| 28 | + icon = "/icon/coder.svg" |
| 29 | +
|
| 30 | + option { |
| 31 | + icon = "/emojis/1f3f3-fe0f-200d-26a7-fe0f.png" |
| 32 | + } |
| 33 | + } |
| 34 | +``` |
| 35 | + |
| 36 | +-[**Authentication Providers**](https://coder.com/docs/v2/latest/admin/external-auth): |
| 37 | + |
| 38 | +- Use icons for external authentication providers to make them recognizable |
| 39 | + |
| 40 | +##Bundled icons |
| 41 | + |
| 42 | +Coder is distributed with a bundle of icons for popular cloud providers and |
| 43 | +programming languages. You can see all of the icons (or suggest new ones) in our |
| 44 | +repository on |
| 45 | +[GitHub](https://github.com/coder/coder/tree/main/site/static/icon). |
| 46 | + |
| 47 | +You can also view the entire list, with search and previews, by navigating to |
| 48 | +/icons on your Coder deployment. E.g.[https://coder.example.com/icons](#). This |
| 49 | +can be particularly useful in airgapped deployments. |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | +##External icons |
| 54 | + |
| 55 | +You can use any image served over HTTPS as an icon, by specifying the full URL |
| 56 | +of the image. We recommend that you use a CDN that you control, but it can be |
| 57 | +served from any source that you trust. |
| 58 | + |
| 59 | +You can also embed an image by using data: URLs. |
| 60 | + |
| 61 | +- Only the https: and data: protocols are supported in icon URLs (not http:) |
| 62 | + |
| 63 | +- Be careful when using images hosted by someone else; they might disappear or |
| 64 | + change! |
| 65 | + |
| 66 | +- Be careful when using data: URLs. They can get rather large, and can |
| 67 | + negatively impact loading times for pages and queries they appear in. Only use |
| 68 | + them for very small icons that compress well. |