refactor: update icon submission templates for clarity and consistency

- Enhanced descriptions for adding and updating monochrome and normal icons to clarify light/dark version requirements.
- Improved input prompts for icon names, SVG codes, and additional notes to ensure better user guidance.
- Added optional fields for brand guidelines and source URLs to enrich submissions.
- Updated the icon submission form component to reflect the new template structures and descriptions.

.github/ISSUE_TEMPLATE/add_monochrome_icon.yml

@@ -1,73 +1,88 @@
 name: "Add light & dark icon"
-description: Use this template to add a new icon to the project. Monochrome icons need both light and dark versions.
-title: "feat(icons): add [NAME]"
-labels: ["monochrome-icon"]
+description: |
+  Submit a new icon with distinct 'light' and 'dark' versions.
+  - A **Light Icon** is typically light-colored (e.g., predominantly white/very light shades, like Sonarr's logo) and is best suited for dark backgrounds.
+  - A **Dark Icon** is typically dark-colored (e.g., predominantly black/very dark shades, like Ollama's logo) and is best suited for light backgrounds.
+title: "feat(icons): add monochrome [icon-name]"
+labels: ["icon addition", "monochrome icon"]
 body:
   - type: markdown
     attributes:
       value: |
-        Hello and thank you for contributing to the project! Please fill out the following information to add a new icon to the project.
-        Once you've submitted the issue, sombody from the team will review it, before adding a label which automatically creates a pull request with the other filetypes.
-        If you submit a PNG icon, please note, that the SVG can not be generated from it.
+        Thanks for contributing a new icon with light and dark variants! Please complete the following.
+        Ensure your icons are optimized and adhere to quality standards.
+        **Light Icon Definition:** Predominantly light colors (e.g., white, light grays - like Sonarr's logo), designed for optimal visibility on dark backgrounds.
+        **Dark Icon Definition:** Predominantly dark colors (e.g., black, dark grays - like Ollama's logo), designed for optimal visibility on light backgrounds.
+
   - type: input
+    id: icon-name
     attributes:
-      label: Icon name
-      description: The name has to be unique and should be kebab-case.
-      placeholder: e.g. "icon-name"
+      label: "Icon Name"
+      description: "The unique name for the icon (e.g., `home-assistant`). This will be the base filename."
+      placeholder: "e.g., sonarr"
+    validations:
+      required: true
+
   - type: textarea
+    id: svg-code-light
     attributes:
-      label: Paste light mode icon
-      description: |
-        Please paste the icon here. It will automatically upload it to github. This icon should be visible on a light background.
+      label: "SVG Code (Light Version)"
+      description: "Paste the SVG code for the **Light Version** of the icon (predominantly light colors, for dark backgrounds)."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: true
+
   - type: textarea
+    id: svg-code-dark
     attributes:
-      label: Paste dark mode icon
-      description: |
-        Please paste the icon here. It will automatically upload it to github. This icon should be visible on a dark background.
-  - type: dropdown
-    attributes:
-      label: Icon type
-      options:
-        - SVG
-        - PNG
-  - type: dropdown
-    attributes:
-      label: Categories
-      multiple: true
-      options:
-        - Animal
-        - Cloud
-        - Communication
-        - Design
-        - Development
-        - E-Commerce
-        - Education
-        - File
-        - Finance
-        - Food
-        - Gaming
-        - Hardware
-        - Health
-        - Location
-        - Logistics
-        - Media
-        - Music
-        - Nature
-        - News
-        - Organization
-        - Search
-        - Security
-        - SocialMedia
-        - Streaming
-        - Travel
-        - Video
+      label: "SVG Code (Dark Version)"
+      description: "Paste the SVG code for the **Dark Version** of the icon (predominantly dark colors, for light backgrounds)."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: true
+
   - type: input
+    id: brand-guidelines
     attributes:
-      label: Aliases
-      description: A comma separated list of aliases
-      placeholder: e.g. "icon-alias, icon-alias-2"
+      label: "Brand Guidelines URL (Optional)"
+      description: "If available, provide a link to the official brand guidelines or logo source."
+      placeholder: "e.g., https://brand.home-assistant.io/"
+
+  - type: input
+    id: source-url
+    attributes:
+      label: "Icon Source URL (Optional)"
+      description: "Link to where you found the icon (e.g., official website, GitHub repository)."
+      placeholder: "e.g., https://example.com/logo.svg"
+
+  - type: dropdown
+    id: icon-type-confirmation
+    attributes:
+      label: "Icon Type Confirmation"
+      description: "Confirm this icon submission includes separate light and dark variants as defined above."
+      options:
+        - "Yes, this includes light and dark variants."
+    validations:
+      required: true
+
+  - type: input
+    id: categories
+    attributes:
+      label: "Categories (Optional, comma-separated)"
+      description: "Relevant categories for the icon (e.g., `media, automation`). Helps with searching and organization."
+      placeholder: "e.g., dashboard, utility, networking"
+
+  - type: input
+    id: aliases
+    attributes:
+      label: "Aliases (Optional, comma-separated)"
+      description: "Alternative names or keywords for the icon (e.g., `ha, hass`)."
+      placeholder: "e.g., prox, pve"
+
   - type: textarea
+    id: additional-notes
     attributes:
-      label: Additional information
-      description: |
-        Add additional informations like a link to the application.
+      label: "Additional Notes (Optional)"
+      description: "Any other relevant information or context for the maintainers."

.github/ISSUE_TEMPLATE/add_normal_icon.yml

@@ -1,71 +1,74 @@
 name: "Add normal icon"
-description: Use this template to add a new icon to the project. Normal icons work for both light and dark themes.
-title: "feat(icons): add [NAME]"
-labels: ["normal-icon"]
+description: "Submit a new 'normal' icon. A normal icon is designed to be versatile and visually consistent across both light and dark backgrounds without requiring separate versions."
+title: "feat(icons): add [icon-name]"
+labels: ["icon addition", "normal icon"]
 body:
   - type: markdown
     attributes:
       value: |
-        Hello and thank you for contributing to the project! Please fill out the following information to add a new icon to the project.
-        Once you've submitted the issue, sombody from the team will review it, before adding a label which automatically creates a pull request with the other filetypes.
-        If you submit a PNG icon, please note, that the SVG can not be generated from it.
+        Thanks for your interest in contributing a new icon! Please complete the following details.
+        A **normal icon** should be designed to work well and maintain good contrast/readability on both light and dark backgrounds.
+        Ensure your icon is optimized and adheres to our quality standards.
+
   - type: input
-    id: name
+    id: icon-name
     attributes:
-      label: Icon name
-      description: The name has to be unique and should be kebab-case.
-      placeholder: e.g. "icon-name"
+      label: "Icon Name"
+      description: "The unique name for the icon (e.g., `home-assistant`). This will be used as the filename."
+      placeholder: "e.g., sonarr"
+    validations:
+      required: true
+
   - type: textarea
-    id: icon
+    id: svg-code
     attributes:
-      label: Paste icon
-      description: |
-        Please paste the icon here. It will automatically upload it to github.
-  - type: dropdown
-    id: type
-    attributes:
-      label: Icon type
-      options:
-        - SVG
-        - PNG
-  - type: dropdown
-    attributes:
-      label: Categories
-      multiple: true
-      options:
-        - Animal
-        - Cloud
-        - Communication
-        - Design
-        - Development
-        - E-Commerce
-        - Education
-        - File
-        - Finance
-        - Food
-        - Gaming
-        - Hardware
-        - Health
-        - Location
-        - Logistics
-        - Media
-        - Music
-        - Nature
-        - News
-        - Organization
-        - Search
-        - Security
-        - SocialMedia
-        - Streaming
-        - Travel
-        - Video
+      label: "SVG Code (Normal Version)"
+      description: "Paste the SVG code for the icon. This version should be suitable for both light and dark backgrounds. Ensure the icon\'s colors provide good contrast and readability on various background shades."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: true
+
   - type: input
+    id: brand-guidelines
     attributes:
-      label: Aliases
-      description: A comma separated list of aliases
-      placeholder: e.g. "icon-alias, icon-alias-2"
+      label: "Brand Guidelines URL (Optional)"
+      description: "If available, provide a link to the official brand guidelines or logo source."
+      placeholder: "e.g., https://brand.home-assistant.io/"
+
+  - type: input
+    id: source-url
+    attributes:
+      label: "Icon Source URL (Optional)"
+      description: "Link to where you found the icon (e.g., official website, GitHub repository)."
+      placeholder: "e.g., https://example.com/logo.svg"
+
+  - type: dropdown
+    id: icon-type-confirmation
+    attributes:
+      label: "Icon Type Confirmation"
+      description: "Confirm this icon is a \'normal\' icon (designed to be versatile and visually consistent across both light and dark backgrounds without requiring separate versions)."
+      options:
+        - "Yes, this is a normal icon."
+    validations:
+      required: true
+
+  - type: input
+    id: categories
+    attributes:
+      label: "Categories (Optional, comma-separated)"
+      description: "Relevant categories for the icon (e.g., `media, automation`). Helps with searching and organization."
+      placeholder: "e.g., dashboard, utility, networking"
+
+  - type: input
+    id: aliases
+    attributes:
+      label: "Aliases (Optional, comma-separated)"
+      description: "Alternative names or keywords for the icon (e.g., `ha, hass`)."
+      placeholder: "e.g., prox, pve"
+
   - type: textarea
+    id: additional-notes
     attributes:
-      label: Additional information
-      description: |
-        Add additional informations like a link to the application.
+      label: "Additional Notes (Optional)"
+      description: "Any other relevant information or context for the maintainers."

.github/ISSUE_TEMPLATE/add_wordmark_icon.yml

@@ -0,0 +1,110 @@
+name: "Add Wordmark Icon"
+description: |
+  Submit a new wordmark icon (icon featuring brand name).
+  A **Wordmark Icon** incorporates the brand's name or logotype directly into or alongside the graphical mark.
+  It can be a single version for all themes, or have separate light/dark versions.
+  - **Light Icon Version:** (If applicable) predominantly light colors (e.g., Sonarr's logo), for dark backgrounds.
+  - **Dark Icon Version:** (If applicable) predominantly dark colors (e.g., Ollama's logo), for light backgrounds.
+title: "feat(icons): add wordmark [icon-name]"
+labels: ["icon addition", "wordmark icon"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for contributing a new wordmark icon!
+        **What is a Wordmark Icon?** It's an icon that integrates the brand's name/logotype with its graphical mark for stronger brand recognition.
+        Please complete the following details. Ensure your icon is optimized.
+
+  - type: input
+    id: icon-name
+    attributes:
+      label: "Icon Name (Base)"
+      description: "The unique name for the icon (e.g., `my-service-wordmark`). This will be used as the base for filenames."
+      placeholder: "e.g., awesome-app-wordmark"
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: |
+        **Icon Versioning:** Does this wordmark have a single version or separate light/dark versions?
+
+  - type: checkboxes
+    id: wordmark-type
+    attributes:
+      label: "Wordmark Version Type"
+      description: "Select how this wordmark is provided."
+      options:
+        - label: "Single version (works on both light and dark backgrounds)"
+          required: false
+        - label: "Separate light and dark versions"
+          required: false
+
+  - type: textarea
+    id: svg-code-wordmark-normal
+    attributes:
+      label: "SVG Code (Single/Normal Wordmark)"
+      description: "If this is a single-version wordmark, paste the SVG code here. Ensure it's versatile for all backgrounds."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: false
+
+  - type: textarea
+    id: svg-code-wordmark-light
+    attributes:
+      label: "SVG Code (Light Wordmark Version)"
+      description: "If providing separate versions, paste the SVG for the **Light Version** here (predominantly light colors, e.g., for dark UIs)."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: false
+
+  - type: textarea
+    id: svg-code-wordmark-dark
+    attributes:
+      label: "SVG Code (Dark Wordmark Version)"
+      description: "If providing separate versions, paste the SVG for the **Dark Version** here (predominantly dark colors, e.g., for light UIs)."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: false
+
+  - type: markdown
+    attributes:
+      value: |
+        **Important:** Please ensure you fill out the correct SVG code section(s) based on your selection above. If providing separate light/dark versions, both are typically required. If a single version, only the 'Single/Normal' field is needed.
+
+  - type: input
+    id: brand-guidelines
+    attributes:
+      label: "Brand Guidelines URL (Optional)"
+      description: "Link to official brand guidelines, if available."
+      placeholder: "e.g., https://brand.example.com/"
+
+  - type: input
+    id: source-url
+    attributes:
+      label: "Icon Source URL (Optional)"
+      description: "Link to where you found the wordmark (e.g., official website)."
+      placeholder: "e.g., https://example.com/logo-wordmark.svg"
+
+  - type: input
+    id: categories
+    attributes:
+      label: "Categories (Optional, comma-separated)"
+      description: "Relevant categories for the icon."
+      placeholder: "e.g., service, productivity"
+
+  - type: input
+    id: aliases
+    attributes:
+      label: "Aliases (Optional, comma-separated)"
+      description: "Alternative names or keywords."
+      placeholder: "e.g., myapp-text, full-logo"
+
+  - type: textarea
+    id: additional-notes
+    attributes:
+      label: "Additional Notes (Optional)"
+      description: "Any other relevant information." 

.github/ISSUE_TEMPLATE/update_monochrome_icon.yml

@@ -1,36 +1,59 @@
 name: "Update light & dark icon"
-description: Use this template to update an existing icon. Monochrome icons need both light and dark versions.
-title: "feat(icons): update [NAME]"
-labels: ["monochrome-icon"]
+description: |
+  Improve an existing icon with distinct 'light' and 'dark' versions.
+  - A **Light Icon** is typically light-colored (e.g., predominantly white/very light shades, like Sonarr's logo) and is best suited for dark backgrounds.
+  - A **Dark Icon** is typically dark-colored (e.g., predominantly black/very dark shades, like Ollama's logo) and is best suited for light backgrounds.
+title: "fix(icons): update monochrome [icon-name]"
+labels: ["icon update", "monochrome icon"]
 body:
   - type: markdown
     attributes:
       value: |
-        Hello and thank you for contributing to the project! Please fill out the following informations to update an existing icon in the project.
+        Thanks for improving an icon with light and dark variants!
+        Please ensure the updated versions adhere to the definitions:
+        **Light Icon Definition:** Predominantly light colors (e.g., white, light grays - like Sonarr's logo), for dark backgrounds.
+        **Dark Icon Definition:** Predominantly dark colors (e.g., black, dark grays - like Ollama's logo), for light backgrounds.
+        Please specify the icon name and provide the updated SVGs.
+
   - type: input
-    id: iconName
+    id: icon-name
     attributes:
-      label: Icon name
-      description: The name has to be unique and should be kebab-case.
-      placeholder: e.g. "icon-name"
+      label: "Icon Name to Update"
+      description: "The name of the existing icon you are updating (e.g., `home-assistant`)."
+      placeholder: "e.g., sonarr"
+    validations:
+      required: true
+
   - type: textarea
+    id: svg-code-light
     attributes:
-      label: Paste light mode icon
-      description: |
-        Please paste the icon here. It will automatically upload it to github. This icon should be visible on a light background.
+      label: "Updated SVG Code (Light Version)"
+      description: "Paste the new SVG code for the **Light Version** (predominantly light colors, for dark backgrounds)."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: true
+
   - type: textarea
+    id: svg-code-dark
     attributes:
-      label: Paste dark mode icon
-      description: |
-        Please paste the icon here. It will automatically upload it to github. This icon should be visible on a dark background.
-  - type: dropdown
-    attributes:
-      label: Icon type
-      options:
-        - SVG
-        - PNG
+      label: "Updated SVG Code (Dark Version)"
+      description: "Paste the new SVG code for the **Dark Version** (predominantly dark colors, for light backgrounds)."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: true
+
   - type: textarea
+    id: reason-for-update
     attributes:
-      label: Additional information
-      description: |
-        Add additional informations like, the reason for the update, or what has been changed.
+      label: "Reason for Update"
+      description: "Briefly explain why this icon needs an update (e.g., outdated design, quality, color adjustment)."
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-notes
+    attributes:
+      label: "Additional Notes (Optional)"
+      description: "Any other relevant information or context for the maintainers."

.github/ISSUE_TEMPLATE/update_normal_icon.yml

@@ -1,31 +1,44 @@
 name: "Update normal icon"
-description: Use this template to update an existing icon. Normal icons work for both light and dark themes.
-title: "feat(icons): update [NAME]"
-labels: ["normal-icon"]
+description: "Improve an existing 'normal' icon. A normal icon is designed to be versatile and visually consistent across both light and dark backgrounds."
+title: "fix(icons): update [icon-name]"
+labels: ["icon update", "normal icon"]
 body:
   - type: markdown
     attributes:
       value: |
-        Hello and thank you for contributing to the project! Please fill out the following informations to update an existing icon in the project.
+        Thanks for helping improve an existing icon!
+        A **normal icon** should be designed to work well and maintain good contrast/readability on both light and dark backgrounds.
+        Please specify the icon name and provide the updated details.
+
   - type: input
-    id: iconName
+    id: icon-name
     attributes:
-      label: Icon name
-      description: The name has to match the existing icon name.
-      placeholder: e.g. "icon-name"
+      label: "Icon Name to Update"
+      description: "The name of the existing icon you are updating (e.g., `home-assistant`)."
+      placeholder: "e.g., sonarr"
+    validations:
+      required: true
+
   - type: textarea
+    id: svg-code
     attributes:
-      label: Paste icon
-      description: |
-        Please paste the icon here. It will automatically upload it to github.
-  - type: dropdown
-    attributes:
-      label: Icon type
-      options:
-        - SVG
-        - PNG
+      label: "Updated SVG Code (Normal Version)"
+      description: "Paste the new SVG code for the icon. This version should be suitable for both light and dark backgrounds. Ensure the icon\'s colors provide good contrast and readability."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: true
+
   - type: textarea
+    id: reason-for-update
     attributes:
-      label: Additional information
-      description: |
-        Add additional informations like, the reason for the update, or what has been changed.
+      label: "Reason for Update"
+      description: "Briefly explain why this icon needs an update (e.g., outdated design, quality improvement, color adjustment for better universal background compatibility)."
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-notes
+    attributes:
+      label: "Additional Notes (Optional)"
+      description: "Any other relevant information or context for the maintainers."

.github/ISSUE_TEMPLATE/update_wordmark_icon.yml

@@ -0,0 +1,87 @@
+name: "Update Wordmark Icon"
+description: |
+  Improve an existing wordmark icon.
+  A **Wordmark Icon** incorporates the brand's name or logotype.
+  Remember the light/dark definitions if applicable for the wordmark.
+title: "fix(icons): update wordmark [icon-name]"
+labels: ["icon update", "wordmark icon"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for helping improve a wordmark icon!
+        Please specify the icon name and provide the updated details.
+
+  - type: input
+    id: icon-name
+    attributes:
+      label: "Wordmark Icon Name to Update"
+      description: "The name of the existing wordmark icon you are updating (e.g., `my-service-wordmark`)."
+      placeholder: "e.g., awesome-app-wordmark"
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: |
+        **Icon Versioning Being Updated:** Is this wordmark a single version or does it have separate light/dark versions? This helps in providing the correct updated SVGs.
+
+  - type: checkboxes
+    id: wordmark-update-type
+    attributes:
+      label: "Wordmark Version Type (of the icon being updated)"
+      description: "Indicate the type of wordmark you are updating."
+      options:
+        - label: "Updating a single-version wordmark"
+          required: false
+        - label: "Updating a wordmark with separate light and dark versions"
+          required: false
+
+  - type: textarea
+    id: svg-code-wordmark-normal-updated
+    attributes:
+      label: "Updated SVG Code (Single/Normal Wordmark)"
+      description: "If updating a single-version wordmark, paste the NEW SVG code here."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: false
+
+  - type: textarea
+    id: svg-code-wordmark-light-updated
+    attributes:
+      label: "Updated SVG Code (Light Wordmark Version)"
+      description: "If updating light/dark versions, paste the NEW SVG for the Light Version here (predominantly light colors)."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: false
+
+  - type: textarea
+    id: svg-code-wordmark-dark-updated
+    attributes:
+      label: "Updated SVG Code (Dark Wordmark Version)"
+      description: "If updating light/dark versions, paste the NEW SVG for the Dark Version here (predominantly dark colors)."
+      placeholder: "<svg>...</svg>"
+      render: svg
+    validations:
+      required: false
+
+  - type: markdown
+    attributes:
+      value: |
+        **Important:** Provide the updated SVG(s) in the relevant section(s) above based on the type of wordmark being updated.
+
+  - type: textarea
+    id: reason-for-update
+    attributes:
+      label: "Reason for Update"
+      description: "Briefly explain why this wordmark icon needs an update (e.g., outdated design, quality improvement, color adjustment)."
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-notes
+    attributes:
+      label: "Additional Notes (Optional)"
+      description: "Any other relevant information." 

web/src/components/icon-submission-form.tsx

@@ -11,28 +11,40 @@ import { useState } from "react"
 export const ISSUE_TEMPLATES = [
 	{
 		id: "add_monochrome_icon",
-		name: "Add light & dark icon",
-		description: "Submit a new icon with both light and dark versions for optimal theme compatibility.",
+		name: "Add Light & Dark Icon",
+		description: "Submit a new icon with distinct light (for dark UIs, e.g., Sonarr) and dark (for light UIs, e.g., Ollama) versions.",
 		url: `${REPO_PATH}/issues/new?template=add_monochrome_icon.yml`,
 	},
 	{
 		id: "add_normal_icon",
-		name: "Add normal icon",
-		description: "Submit a new icon that works well across both light and dark themes.",
+		name: "Add Normal Icon",
+		description: "Submit a new icon designed to be versatile across both light and dark themes without separate versions.",
 		url: `${REPO_PATH}/issues/new?template=add_normal_icon.yml`,
 	},
+	{
+		id: "add_wordmark_icon",
+		name: "Add Wordmark Icon",
+		description: "Submit a new wordmark icon (icon with brand name). Can be single-version or have light/dark variants.",
+		url: `${REPO_PATH}/issues/new?template=add_wordmark_icon.yml`,
+	},
 	{
 		id: "update_monochrome_icon",
-		name: "Update light & dark icon",
-		description: "Improve an existing icon by updating both light and dark versions.",
+		name: "Update Light & Dark Icon",
+		description: "Improve an existing icon with light and dark versions, clarifying light (e.g., Sonarr) vs. dark (e.g., Ollama) variants.",
 		url: `${REPO_PATH}/issues/new?template=update_monochrome_icon.yml`,
 	},
 	{
 		id: "update_normal_icon",
-		name: "Update normal icon",
-		description: "Improve an existing icon that works across both light and dark themes.",
+		name: "Update Normal Icon",
+		description: "Improve an existing versatile icon that works across both light and dark themes.",
 		url: `${REPO_PATH}/issues/new?template=update_normal_icon.yml`,
 	},
+	{
+		id: "update_wordmark_icon",
+		name: "Update Wordmark Icon",
+		description: "Improve an existing wordmark icon (icon with brand name).",
+		url: `${REPO_PATH}/issues/new?template=update_wordmark_icon.yml`,
+	},
 	{
 		id: "blank_issue",
 		name: "Something else",