diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
index 696bf510c..f5d757119 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
@@ -5,7 +5,7 @@ import { classNames } from '@standardnotes/utils'
 import Popover from '@/Components/Popover/Popover'
 import DisplayOptionsMenu from './DisplayOptionsMenu'
 import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu'
-import { IconType, isTag } from '@standardnotes/snjs'
+import { isTag, VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import RoundIconButton from '@/Components/Button/RoundIconButton'
 import { AnyTag } from '@/Controllers/Navigation/AnyTagType'
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
@@ -13,7 +13,7 @@ import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 type Props = {
   application: WebApplication
   panelTitle: string
-  icon?: IconType | string
+  icon?: VectorIconNameOrEmoji
   addButtonLabel: string
   addNewItem: () => void
   isFilesSmartView: boolean
@@ -108,7 +108,7 @@ const ContentListHeader = ({
         <div className={`flex min-w-0 flex-grow flex-row ${!optionsSubtitle ? 'items-center' : ''}`}>
           {icon && (
             <Icon
-              type={icon as IconType}
+              type={icon}
               size={'custom'}
               className={` ml-0.5 mr-1.5 h-7 w-7 text-2xl text-neutral lg:h-6 lg:w-6 lg:text-lg ${
                 optionsSubtitle ? 'mt-1' : ''
diff --git a/packages/web/src/javascripts/Components/Icon/IconPicker.tsx b/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
index e52f75947..035ada33f 100644
--- a/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
+++ b/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
@@ -10,7 +10,7 @@ import { IconPickerType } from './IconPickerType'
 
 type Props = {
   selectedValue: VectorIconNameOrEmoji
-  onIconChange: (value?: string) => void
+  onIconChange: (value?: VectorIconNameOrEmoji) => void
   platform: Platform
   useIconGrid?: boolean
   iconGridClassName?: string
@@ -87,7 +87,7 @@ const IconPicker = ({
   const handleEmojiChange = (value: EmojiString) => {
     setEmojiInputValue(value)
 
-    const emojiLength = getEmojiLength(value)
+    const emojiLength = getEmojiLength(value as string)
     if (emojiLength === 1) {
       onIconChange(value)
       emojiInputRef.current?.blur()
@@ -130,7 +130,7 @@ const IconPicker = ({
               id="change-tag-icon-dropdown"
               label="Change the icon for a tag"
               items={iconOptions}
-              value={selectedValue}
+              value={selectedValue as string}
               onChange={handleIconChange}
               portal={portalDropdown}
             />
@@ -144,7 +144,7 @@ const IconPicker = ({
                 autoFocus={emojiInputFocused}
                 className="w-full flex-grow rounded border border-solid border-passive-3 bg-default px-2 py-1 text-base font-bold text-text focus:shadow-none focus:outline-none"
                 type="text"
-                value={emojiInputValue}
+                value={emojiInputValue as string}
                 onChange={({ target: input }) => handleEmojiChange((input as HTMLInputElement)?.value)}
               />
             </div>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
index 3471173f8..91f278294 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
@@ -7,7 +7,7 @@ import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
 import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
 import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
 import Spinner from '@/Components/Spinner/Spinner'
-import { Platform, SmartViewDefaultIconName } from '@standardnotes/snjs'
+import { Platform, SmartViewDefaultIconName, VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { EditSmartViewModalController } from './EditSmartViewModalController'
@@ -103,7 +103,7 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
               <div className="p-2">
                 <IconPicker
                   selectedValue={icon || SmartViewDefaultIconName}
-                  onIconChange={(value?: string | undefined) => {
+                  onIconChange={(value?: VectorIconNameOrEmoji) => {
                     setIcon(value || SmartViewDefaultIconName)
                     toggleIconPicker()
                   }}
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModalController.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModalController.tsx
index 1e428a366..a7d545b6e 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModalController.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModalController.tsx
@@ -6,13 +6,14 @@ import {
   SmartView,
   SmartViewDefaultIconName,
   SmartViewMutator,
+  VectorIconNameOrEmoji,
 } from '@standardnotes/snjs'
 import { confirmDialog } from '@standardnotes/ui-services'
 import { action, makeObservable, observable } from 'mobx'
 
 export class EditSmartViewModalController {
   title = ''
-  icon: string = SmartViewDefaultIconName
+  icon: VectorIconNameOrEmoji = SmartViewDefaultIconName
   predicateJson = ''
   isPredicateJsonValid = false
   isSaving = false
@@ -40,7 +41,7 @@ export class EditSmartViewModalController {
     this.title = title
   }
 
-  setIcon = (icon: string) => {
+  setIcon = (icon: VectorIconNameOrEmoji) => {
     this.icon = icon
   }
 
@@ -89,7 +90,7 @@ export class EditSmartViewModalController {
 
     await this.application.mutator.changeAndSaveItem<SmartViewMutator>(this.view, (mutator) => {
       mutator.title = this.title
-      mutator.iconString = this.icon || SmartViewDefaultIconName
+      mutator.iconString = (this.icon as string) || SmartViewDefaultIconName
       mutator.predicate = JSON.parse(this.predicateJson) as PredicateJsonForm
     })
 
diff --git a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
index 4e50f9b17..d7e653c42 100644
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
@@ -8,7 +8,7 @@ import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
 import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
 import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
 import Spinner from '@/Components/Spinner/Spinner'
-import { Platform, SmartViewDefaultIconName } from '@standardnotes/snjs'
+import { Platform, SmartViewDefaultIconName, VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState } from 'react'
 import { AddSmartViewModalController } from './AddSmartViewModalController'
@@ -153,7 +153,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
               <div className="p-2">
                 <IconPicker
                   selectedValue={icon || SmartViewDefaultIconName}
-                  onIconChange={(value?: string | undefined) => {
+                  onIconChange={(value?: VectorIconNameOrEmoji) => {
                     setIcon(value ?? SmartViewDefaultIconName)
                     toggleIconPicker()
                   }}
diff --git a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModalController.ts b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModalController.ts
index 28d7195ba..d6f53c650 100644
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModalController.ts
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModalController.ts
@@ -1,6 +1,11 @@
 import { WebApplication } from '@/Application/Application'
 import { CompoundPredicateBuilderController } from '@/Components/SmartViewBuilder/CompoundPredicateBuilderController'
-import { predicateFromJson, PredicateJsonForm, SmartViewDefaultIconName } from '@standardnotes/snjs'
+import {
+  predicateFromJson,
+  PredicateJsonForm,
+  SmartViewDefaultIconName,
+  VectorIconNameOrEmoji,
+} from '@standardnotes/snjs'
 import { action, makeObservable, observable } from 'mobx'
 
 export class AddSmartViewModalController {
@@ -9,7 +14,7 @@ export class AddSmartViewModalController {
 
   title = ''
 
-  icon: string = SmartViewDefaultIconName
+  icon: VectorIconNameOrEmoji = SmartViewDefaultIconName
 
   predicateController = new CompoundPredicateBuilderController()
 
@@ -49,7 +54,7 @@ export class AddSmartViewModalController {
     this.title = title
   }
 
-  setIcon = (icon: string) => {
+  setIcon = (icon: VectorIconNameOrEmoji) => {
     this.icon = icon
   }
 
@@ -84,7 +89,7 @@ export class AddSmartViewModalController {
         ? JSON.parse(this.customPredicateJson)
         : this.predicateController.toJson()
     const predicate = predicateFromJson(predicateJson as PredicateJsonForm)
-    await this.application.items.createSmartView(this.title, predicate, this.icon)
+    await this.application.items.createSmartView(this.title, predicate, this.icon as string)
 
     this.setIsSaving(false)
     this.closeModal()