diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
index 81597d56a6..e61dd3282f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
@@ -16,7 +16,7 @@ function Badge({ badgeStatus }: BadgeProps) {
    * @param {Object} key
    * @param {Object} type
    */
-  function resolveClasses(key: string, type: string) {
+  function resolveClasses(key: string | number, type: string) {
     let classes = 'remixui_status'
     switch (key) {
     case 'succeed':
@@ -38,7 +38,7 @@ function Badge({ badgeStatus }: BadgeProps) {
     return classes
   }
 
-  function checkStatusKeyValue(value: any, type: string) {
+  function checkStatusKeyValue(value: any, type: BadgeStatus['type']) {
     if (
       value === 'succeed' ||
       value === 'edited' ||
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index a7de212b38..d1c5ab8c40 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -9,14 +9,14 @@ import { IconRecord } from '../types'
 import { CustomTooltip } from '@remix-ui/helper'
 
 export interface IconStatus {
-  key: string
+  key: string | number
   title: string
-  type: string
+  type: 'danger' | 'error' | 'success' | 'info' | 'warning'
   pluginName?: string
 }
 
 export interface BadgeStatus extends IconStatus {
-  text: string
+  text: string | number
 }
 
 interface IconProps {
@@ -30,7 +30,7 @@ const initialState = {
   text: '',
   key: '',
   title: '',
-  type: '',
+  type: null,
   pluginName: ''
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
index 0eeed6dc22..87dd211af5 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
@@ -15,14 +15,14 @@ export type IconBadgeReducerAction = {
 function setIconStatus(name: string, status: IconStatus) {
   if (status.key === 'none') return { ...status, text: '' } // remove status
 
-  let text = ''
-  let key = ''
+  let text: string | number
+  let key: string | number
   if (typeof status.key === 'number') {
     key = status.key
     text = key
   } else key = checkSpecialChars(status.key) ? bleach.sanitize(status.key) : status.key
 
-  let thisType = ''
+  let thisType: IconStatus['type']
   if (status.type === 'error') {
     thisType = 'danger' // to use with bootstrap
   } else thisType = checkSpecialChars(status.type) ? bleach.sanitize(status.type) : status.type