chore(v5): update priority icons (#13905)

# Pull Request Template

## Description

This PR updates the priority icons with a new set and makes them
consistent across the app.


## How Has This Been Tested?

**Screenshots**
<img width="420" height="550" alt="image"
src="https://github.com/user-attachments/assets/cb392934-6c4d-46b4-9fde-244461da62ef"
/>
<img width="358" height="340" alt="image"
src="https://github.com/user-attachments/assets/cb18df47-9a17-42f8-9367-e8b7c4e3958d"
/>
<img width="344" height="468" alt="image"
src="https://github.com/user-attachments/assets/9de92374-e732-48eb-a8a9-85c5b5100931"
/>
<img width="445" height="548" alt="image"
src="https://github.com/user-attachments/assets/ecc4ce51-165c-4593-a9a2-e70b08a29006"
/>


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue

@@ -1,207 +1,63 @@
 <script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
 
-defineProps({
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
   priority: {
     type: String,
     default: '',
   },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+});
+const { t } = useI18n();
+
+const icons = {
+  [CONVERSATION_PRIORITY.URGENT]: 'i-woot-priority-urgent',
+  [CONVERSATION_PRIORITY.HIGH]: 'i-woot-priority-high',
+  [CONVERSATION_PRIORITY.MEDIUM]: 'i-woot-priority-medium',
+  [CONVERSATION_PRIORITY.LOW]: 'i-woot-priority-low',
+};
+
+const priorityLabels = {
+  [CONVERSATION_PRIORITY.URGENT]: 'CONVERSATION.PRIORITY.OPTIONS.URGENT',
+  [CONVERSATION_PRIORITY.HIGH]: 'CONVERSATION.PRIORITY.OPTIONS.HIGH',
+  [CONVERSATION_PRIORITY.MEDIUM]: 'CONVERSATION.PRIORITY.OPTIONS.MEDIUM',
+  [CONVERSATION_PRIORITY.LOW]: 'CONVERSATION.PRIORITY.OPTIONS.LOW',
+};
+
+const iconName = computed(() => {
+  if (props.priority && icons[props.priority]) {
+    return icons[props.priority];
+  }
+  return props.showEmpty ? 'i-woot-priority-empty' : '';
+});
+
+const tooltipContent = computed(() => {
+  if (props.priority && priorityLabels[props.priority]) {
+    return t(priorityLabels[props.priority]);
+  }
+
+  if (props.showEmpty) {
+    return t('CONVERSATION.PRIORITY.OPTIONS.NONE');
+  }
+
+  return '';
 });
 </script>
 
-<!-- eslint-disable vue/no-static-inline-styles -->
 <template>
-  <div class="inline-flex items-center justify-center rounded-md">
+  <Icon
-    <!-- Low Priority -->
+    v-tooltip.top="{
-    <svg
+      content: tooltipContent,
-      v-if="priority === CONVERSATION_PRIORITY.LOW"
+      delay: { show: 500, hide: 0 },
-      width="20"
+    }"
-      height="20"
+    :icon="iconName"
-      viewBox="0 0 20 20"
+    class="size-4 text-n-slate-5"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
   />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- Medium Priority  -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- High Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.HIGH"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-      </g>
-    </svg>
-
-    <!-- Urgent Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.URGENT"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-      </g>
-    </svg>
-  </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -10,7 +10,7 @@ import InboxName from '../InboxName.vue';
 import ConversationContextMenu from './contextMenu/Index.vue';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
-import PriorityMark from './PriorityMark.vue';
+import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
 import VoiceCallStatus from './VoiceCallStatus.vue';
@@ -305,7 +305,7 @@ const deleteConversation = () => {
       >
         <InboxName v-if="showInboxName" :inbox="inbox" class="flex-1 min-w-0" />
         <div
-          class="flex items-center gap-2 flex-shrink-0"
+          class="flex items-baseline gap-2 flex-shrink-0"
           :class="{
             'flex-1 justify-between': !showInboxName,
           }"
@@ -317,7 +317,10 @@ const deleteConversation = () => {
             <fluent-icon icon="person" size="12" class="text-n-slate-11" />
             {{ assignee.name }}
           </span>
-          <PriorityMark :priority="chat.priority" class="flex-shrink-0" />
+          <CardPriorityIcon
+            :priority="chat.priority"
+            class="flex-shrink-0 !size-3.5"
+          />
         </div>
       </div>
       <h4

app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue

@@ -1,53 +0,0 @@
-<script>
-import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
-
-export default {
-  name: 'PriorityMark',
-  props: {
-    priority: {
-      type: String,
-      default: '',
-      validate: value =>
-        [...Object.values(CONVERSATION_PRIORITY), ''].includes(value),
-    },
-  },
-  data() {
-    return {
-      CONVERSATION_PRIORITY,
-    };
-  },
-  computed: {
-    tooltipText() {
-      return this.$t(
-        `CONVERSATION.PRIORITY.OPTIONS.${this.priority.toUpperCase()}`
-      );
-    },
-    isUrgent() {
-      return this.priority === CONVERSATION_PRIORITY.URGENT;
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <span
-    v-if="priority"
-    v-tooltip="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-    }"
-    class="shrink-0 rounded-sm inline-flex items-center justify-center w-3.5 h-3.5"
-    :class="{
-      'bg-n-ruby-4 text-n-ruby-10': isUrgent,
-      'bg-n-slate-4 text-n-slate-11': !isUrgent,
-    }"
-  >
-    <fluent-icon
-      :icon="`priority-${priority.toLowerCase()}`"
-      :size="isUrgent ? 12 : 14"
-      class="flex-shrink-0"
-      view-box="0 0 14 14"
-    />
-  </span>
-</template>

app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue

@@ -36,27 +36,27 @@ export default {
         {
           id: null,
           name: this.$t('CONVERSATION.PRIORITY.OPTIONS.NONE'),
-          thumbnail: `/assets/images/dashboard/priority/none.svg`,
+          icon: 'i-woot-priority-empty',
         },
         {
           id: CONVERSATION_PRIORITY.URGENT,
           name: this.$t('CONVERSATION.PRIORITY.OPTIONS.URGENT'),
-          thumbnail: `/assets/images/dashboard/priority/${CONVERSATION_PRIORITY.URGENT}.svg`,
+          icon: 'i-woot-priority-urgent',
         },
         {
           id: CONVERSATION_PRIORITY.HIGH,
           name: this.$t('CONVERSATION.PRIORITY.OPTIONS.HIGH'),
-          thumbnail: `/assets/images/dashboard/priority/${CONVERSATION_PRIORITY.HIGH}.svg`,
+          icon: 'i-woot-priority-high',
         },
         {
           id: CONVERSATION_PRIORITY.MEDIUM,
           name: this.$t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM'),
-          thumbnail: `/assets/images/dashboard/priority/${CONVERSATION_PRIORITY.MEDIUM}.svg`,
+          icon: 'i-woot-priority-medium',
         },
         {
           id: CONVERSATION_PRIORITY.LOW,
           name: this.$t('CONVERSATION.PRIORITY.OPTIONS.LOW'),
-          thumbnail: `/assets/images/dashboard/priority/${CONVERSATION_PRIORITY.LOW}.svg`,
+          icon: 'i-woot-priority-low',
         },
       ],
     };

app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue

@@ -128,7 +128,7 @@ const saveMacro = async macroData => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 mb-8 max-w-7xl mx-auto w-full !px-6">
+  <div class="flex flex-col gap-6 mb-8 max-w-7xl mx-auto h-full w-full !px-6">
     <woot-loading-state
       v-if="uiFlags.isFetchingItem"
       :message="t('MACROS.EDITOR.LOADING')"

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -5,6 +5,7 @@ import { useToggle } from '@vueuse/core';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
 
 const props = defineProps({
@@ -53,6 +54,10 @@ const hasValue = computed(() => {
   }
   return false;
 });
+
+const hasIcon = computed(() => {
+  return props.selectedItem?.icon || false;
+});
 </script>
 
 <template>
@@ -83,7 +88,7 @@ const hasValue = computed(() => {
           </h4>
         </div>
         <Avatar
-          v-if="hasValue && hasThumbnail"
+          v-if="hasValue && hasThumbnail && !hasIcon"
           :src="selectedItem.thumbnail"
           :status="selectedItem.availability_status"
           :name="selectedItem.name"
@@ -91,6 +96,11 @@ const hasValue = computed(() => {
           hide-offline-status
           rounded-full
         />
+        <Icon
+          v-if="hasValue && hasIcon"
+          :icon="selectedItem.icon"
+          class="size-5 text-n-slate-11"
+        />
       </Button>
       <div
         :class="{

app/javascript/shared/components/ui/MultiselectDropdownItems.vue

@@ -2,6 +2,7 @@
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
@@ -9,6 +10,7 @@ export default {
     WootDropdownItem,
     WootDropdownMenu,
     Avatar,
+    Icon,
     NextButton,
   },
 
@@ -106,7 +108,7 @@ export default {
                 </span>
               </div>
               <Avatar
-                v-if="hasThumbnail"
+                v-if="hasThumbnail && !option.icon"
                 :src="option.thumbnail"
                 :name="option.name"
                 :status="option.availability_status"
@@ -114,6 +116,11 @@ export default {
                 hide-offline-status
                 rounded-full
               />
+              <Icon
+                v-if="option.icon"
+                :icon="option.icon"
+                class="size-5 text-n-slate-11"
+              />
             </NextButton>
           </WootDropdownItem>
         </WootDropdownMenu>

public/assets/images/dashboard/priority/high.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" fill="#F1F5F8"/>
-<path d="M9.7642 8L9.62358 14.1619H8.25142L8.11506 8H9.7642ZM8.9375 16.821C8.67898 16.821 8.45739 16.7301 8.27273 16.5483C8.09091 16.3665 8 16.1449 8 15.8835C8 15.6278 8.09091 15.4091 8.27273 15.2273C8.45739 15.0455 8.67898 14.9545 8.9375 14.9545C9.19034 14.9545 9.40909 15.0455 9.59375 15.2273C9.78125 15.4091 9.875 15.6278 9.875 15.8835C9.875 16.0568 9.83097 16.2145 9.7429 16.3565C9.65767 16.4986 9.54403 16.6122 9.40199 16.6974C9.26278 16.7798 9.10795 16.821 8.9375 16.821Z" fill="#446888"/>
-<path d="M13.1073 8L12.9667 14.1619H11.5945L11.4582 8H13.1073ZM12.2806 16.821C12.0221 16.821 11.8005 16.7301 11.6159 16.5483C11.434 16.3665 11.3431 16.1449 11.3431 15.8835C11.3431 15.6278 11.434 15.4091 11.6159 15.2273C11.8005 15.0455 12.0221 14.9545 12.2806 14.9545C12.5335 14.9545 12.7522 15.0455 12.9369 15.2273C13.1244 15.4091 13.2181 15.6278 13.2181 15.8835C13.2181 16.0568 13.1741 16.2145 13.086 16.3565C13.0008 16.4986 12.8872 16.6122 12.7451 16.6974C12.6059 16.7798 12.4511 16.821 12.2806 16.821Z" fill="#446888"/>
-<path d="M16.4505 8L16.3098 14.1619H14.9377L14.8013 8H16.4505ZM15.6237 16.821C15.3652 16.821 15.1436 16.7301 14.959 16.5483C14.7772 16.3665 14.6862 16.1449 14.6862 15.8835C14.6862 15.6278 14.7772 15.4091 14.959 15.2273C15.1436 15.0455 15.3652 14.9545 15.6237 14.9545C15.8766 14.9545 16.0953 15.0455 16.28 15.2273C16.4675 15.4091 16.5612 15.6278 16.5612 15.8835C16.5612 16.0568 16.5172 16.2145 16.4291 16.3565C16.3439 16.4986 16.2303 16.6122 16.0882 16.6974C15.949 16.7798 15.7942 16.821 15.6237 16.821Z" fill="#446888"/>
-</svg>

public/assets/images/dashboard/priority/low.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" fill="#F1F5F8"/>
-<path d="M12.7642 8L12.6236 14.1619H11.2514L11.1151 8H12.7642ZM11.9375 16.821C11.679 16.821 11.4574 16.7301 11.2727 16.5483C11.0909 16.3665 11 16.1449 11 15.8835C11 15.6278 11.0909 15.4091 11.2727 15.2273C11.4574 15.0455 11.679 14.9545 11.9375 14.9545C12.1903 14.9545 12.4091 15.0455 12.5938 15.2273C12.7812 15.4091 12.875 15.6278 12.875 15.8835C12.875 16.0568 12.831 16.2145 12.7429 16.3565C12.6577 16.4986 12.544 16.6122 12.402 16.6974C12.2628 16.7798 12.108 16.821 11.9375 16.821Z" fill="#446888"/>
-</svg>

public/assets/images/dashboard/priority/medium.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" fill="#F1F5F8"/>
-<path d="M10.7642 8L10.6236 14.1619H9.25142L9.11506 8H10.7642ZM9.9375 16.821C9.67898 16.821 9.45739 16.7301 9.27273 16.5483C9.09091 16.3665 9 16.1449 9 15.8835C9 15.6278 9.09091 15.4091 9.27273 15.2273C9.45739 15.0455 9.67898 14.9545 9.9375 14.9545C10.1903 14.9545 10.4091 15.0455 10.5938 15.2273C10.7812 15.4091 10.875 15.6278 10.875 15.8835C10.875 16.0568 10.831 16.2145 10.7429 16.3565C10.6577 16.4986 10.544 16.6122 10.402 16.6974C10.2628 16.7798 10.108 16.821 9.9375 16.821Z" fill="#446888"/>
-<path d="M14.1073 8L13.9667 14.1619H12.5945L12.4582 8H14.1073ZM13.2806 16.821C13.0221 16.821 12.8005 16.7301 12.6159 16.5483C12.434 16.3665 12.3431 16.1449 12.3431 15.8835C12.3431 15.6278 12.434 15.4091 12.6159 15.2273C12.8005 15.0455 13.0221 14.9545 13.2806 14.9545C13.5335 14.9545 13.7522 15.0455 13.9369 15.2273C14.1244 15.4091 14.2181 15.6278 14.2181 15.8835C14.2181 16.0568 14.1741 16.2145 14.086 16.3565C14.0008 16.4986 13.8872 16.6122 13.7451 16.6974C13.6059 16.7798 13.4511 16.821 13.2806 16.821Z" fill="#446888"/>
-</svg>

public/assets/images/dashboard/priority/none.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" fill="#F1F5F8"/>
-<path d="M13.5686 8L11.1579 16.9562H10L12.4107 8H13.5686Z" fill="#446888"/>
-</svg>

public/assets/images/dashboard/priority/urgent.svg

@@ -1,9 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" fill="#FFEBEE"/>
-<path d="M8 8.5C8 7.94772 8.44772 7.5 9 7.5C9.55228 7.5 10 7.94772 10 8.5V13C10 13.5523 9.55228 14 9 14C8.44772 14 8 13.5523 8 13V8.5Z" fill="#FF382D"/>
-<path d="M8 15.5C8 14.9477 8.44772 14.5 9 14.5C9.55228 14.5 10 14.9477 10 15.5C10 16.0523 9.55228 16.5 9 16.5C8.44772 16.5 8 16.0523 8 15.5Z" fill="#FF382D"/>
-<path d="M11 8.5C11 7.94772 11.4477 7.5 12 7.5C12.5523 7.5 13 7.94772 13 8.5V13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13V8.5Z" fill="#FF382D"/>
-<path d="M11 15.5C11 14.9477 11.4477 14.5 12 14.5C12.5523 14.5 13 14.9477 13 15.5C13 16.0523 12.5523 16.5 12 16.5C11.4477 16.5 11 16.0523 11 15.5Z" fill="#FF382D"/>
-<path d="M14 8.5C14 7.94772 14.4477 7.5 15 7.5C15.5523 7.5 16 7.94772 16 8.5V13C16 13.5523 15.5523 14 15 14C14.4477 14 14 13.5523 14 13V8.5Z" fill="#FF382D"/>
-<path d="M14 15.5C14 14.9477 14.4477 14.5 15 14.5C15.5523 14.5 16 14.9477 16 15.5C16 16.0523 15.5523 16.5 15 16.5C14.4477 16.5 14 16.0523 14 15.5Z" fill="#FF382D"/>
-</svg>

theme/icons.js

@@ -149,6 +149,34 @@ export const icons = {
     height: 11,
   },
 
+  /** Conversation Priority Starts */
+  'priority-empty': {
+    body: `<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#d9d9d9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)" fill="#d9d9d9"><rect x="4" y="12" width="4" height="8" rx="2"/><rect x="10" y="8" width="4" height="12" rx="2"/><rect x="16" y="4" width="4" height="16" rx="2"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  'priority-low': {
+    body: `<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#d9d9d9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><rect x="4" y="12" width="4" height="8" rx="2" fill="#ffc53d"/><rect x="10" y="8" width="4" height="12" rx="2" fill="#e4e4e9"/><rect x="16" y="4" width="4" height="16" rx="2" fill="#e4e4e9"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  'priority-medium': {
+    body: `<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#d9d9d9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><rect x="4" y="12" width="4" height="8" rx="2" fill="#ffc53d"/><rect x="10" y="8" width="4" height="12" rx="2" fill="#ffc53d"/><rect x="16" y="4" width="4" height="16" rx="2" fill="#e4e4e9"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  'priority-high': {
+    body: `<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#ed8a5c" d="M0 0h24v24H0z"/></mask><g mask="url(#a)" fill="#ffc53d"><rect x="4" y="12" width="4" height="8" rx="2"/><rect x="10" y="8" width="4" height="12" rx="2"/><rect x="16" y="4" width="4" height="16" rx="2"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  'priority-urgent': {
+    body: `<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#ed8a5c" d="M0 0h24v24H0z"/></mask><g mask="url(#a)" fill="#e5484d"><rect x="4" y="12" width="4" height="8" rx="2"/><rect x="10" y="8" width="4" height="12" rx="2"/><path d="M18 20q-.824 0-1.413-.49Q16 19.021 16 18.333q0-.687.587-1.177.588-.49 1.413-.49.824 0 1.413.49.587.49.587 1.177t-.587 1.177T18 20m0-5q-.824 0-1.413-.49Q16 14.021 16 13.333V6.667q0-.688.587-1.177Q17.176 5 18 5t1.413.49Q20 5.979 20 6.667v6.666q0 .688-.587 1.177Q18.825 15 18 15"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  /** Ends */
+
   /** Channels Starts */
   website: {
     body: `<g fill="none" stroke="currentColor"><path d="M12 10.1755L12.0083 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.333 10.1755L15.3413 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.66699 10.1755L8.67533 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.0424 13.9838V7.56679C20.0424 6.14919 18.9729 5 17.3687 5H6.67374C5.0695 5 4 6.14919 4 7.56679V15.2672C4 16.6848 4.53475 17.8339 6.67374 17.8339H12.0212" stroke-width="1.60424" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.9345 16.8695C20.3746 17.1402 20.3475 17.7991 19.8942 17.8505L17.6067 18.1098L16.5807 20.1706C16.3774 20.579 15.749 20.3791 15.6451 19.8729L14.5263 14.4221C14.4385 13.9943 14.823 13.725 15.1949 13.9539L19.9345 16.8695Z" stroke-width="1.60424"/></g>`,