diff --git a/VAMobile/src/components/ActivityButton.tsx b/VAMobile/src/components/ActivityButton.tsx
index f605217144a..3bb9223ab82 100644
--- a/VAMobile/src/components/ActivityButton.tsx
+++ b/VAMobile/src/components/ActivityButton.tsx
@@ -1,9 +1,10 @@
 import React, { FC } from 'react'
 import { Linking, Platform, Pressable, PressableStateCallbackType, ViewStyle } from 'react-native'
 
+import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
 import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 
-import { Box, TextView, VAIcon } from 'components'
+import { Box, TextView } from 'components'
 import { useTheme } from 'utils/hooks'
 import { WaygateToggleType, waygateNativeAlert } from 'utils/waygateConfig'
 
@@ -75,13 +76,11 @@ const ActivityButton: FC<ActivityButtonProps> = ({ title, subText, deepLink }: A
             <Box flex={1}>
               <TextView variant={'ActivityButtonSubtext'}>{subText}</TextView>
             </Box>
-            <VAIcon
+            <Icon
               width={24}
               height={24}
-              name="RightArrowInCircle"
+              name={'ArrowCircleRight'}
               fill={theme.colors.icon.activityButton}
-              fill2={'transparent'}
-              ml={theme.dimensions.listItemDecoratorMarginLeft}
               preventScaling={true}
             />
           </Box>
diff --git a/VAMobile/src/components/BaseListItem.tsx b/VAMobile/src/components/BaseListItem.tsx
index 1d3d3d5bf61..233818df208 100644
--- a/VAMobile/src/components/BaseListItem.tsx
+++ b/VAMobile/src/components/BaseListItem.tsx
@@ -2,7 +2,8 @@ import React, { FC, ReactElement, useState } from 'react'
 import { AccessibilityProps, AccessibilityRole, AccessibilityState, Pressable, PressableProps } from 'react-native'
 import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
 
-import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 
 import FileRequestNumberIndicator from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/FileRequestNumberIndicator'
 import { a11yHintProp, a11yValueProp } from 'utils/accessibility'
@@ -11,7 +12,6 @@ import { useTheme } from 'utils/hooks'
 
 import Box, { BackgroundVariant, BoxProps } from './Box'
 import SwitchComponent, { SwitchProps } from './Switch'
-import VAIcon, { VAIconProps } from './VAIcon'
 
 /** Decorator type for the button, defaults to Navigation (right arrow) */
 export enum ButtonDecoratorType {
@@ -26,18 +26,18 @@ export enum ButtonDecoratorType {
   /** Trash can decorator */
   Delete = 'Delete',
   /** Empty radio button decorator */
-  RadioEmpty = 'RadioEmpty',
+  RadioEmpty = 'RadioButtonUnchecked',
   /** Filled radio button decorator */
-  RadioFilled = 'RadioFilled',
+  RadioFilled = 'RadioButtonChecked',
   /** Disabled radio button decorator */
   RadioDisabled = 'RadioDisabled',
   /** Empty check box button decorator */
-  CheckBoxEmpty = 'CheckBoxEmpty',
+  CheckBoxEmpty = 'CheckBoxOutlineBlank',
   /** Filled check box button decorator */
-  CheckBoxFilled = 'CheckBoxFilled',
+  CheckBoxFilled = 'CheckBox',
 }
 
-export type ListItemDecoratorProps = Partial<VAIconProps> | Partial<SwitchProps>
+export type ListItemDecoratorProps = Partial<IconProps> | Partial<SwitchProps>
 
 /**
  * Props for BaseListItem
@@ -98,68 +98,53 @@ export const ButtonDecorator: FC<{
   const radioBtnWidth = 22
   const radioBtnHeight = 22
 
+  const buttonSelectedFill =
+    theme.mode === 'dark' ? colors.vadsColorFormsForegroundActiveOnDark : colors.vadsColorFormsForegroundActiveOnLight
+  const buttonUnselectedFill =
+    theme.mode === 'dark' ? colors.vadsColorFormsBorderDefaultOnDark : colors.vadsColorFormsBorderDefaultOnLight
+
   const switchOnPress = onPress ? onPress : () => {}
 
   switch (decorator) {
     case ButtonDecoratorType.Switch:
       return <SwitchComponent onPress={switchOnPress} {...decoratorProps} />
     case ButtonDecoratorType.SelectedItem:
-      return (
-        <VAIcon name={'CheckMark'} height={13} width={16} fill={theme.colors.icon.pickerIcon} {...decoratorProps} />
-      )
+      return <Icon name={'Check'} height={18} width={18} fill={theme.colors.icon.pickerIcon} />
     case ButtonDecoratorType.Delete:
-      return <VAIcon name={'Trash'} height={16} width={14} fill={theme.colors.icon.error} {...decoratorProps} />
+      return <Icon name={'Delete'} height={16} width={14} fill={theme.colors.icon.error} />
     case ButtonDecoratorType.RadioFilled:
       return (
-        <VAIcon
-          name={'RadioFilled'}
-          height={radioBtnHeight}
-          width={radioBtnWidth}
-          fill={theme.colors.icon.checkboxEnabledPrimary}
-          {...decoratorProps}
-        />
+        <Icon name={'RadioButtonChecked'} height={radioBtnHeight} width={radioBtnWidth} fill={buttonSelectedFill} />
       )
     case ButtonDecoratorType.RadioEmpty:
       return (
-        <VAIcon
-          name={'RadioEmpty'}
-          height={radioBtnHeight}
-          width={radioBtnWidth}
-          fill={theme.colors.icon.checkboxDisabledContrast}
-          stroke={theme.colors.icon.checkboxDisabled}
-          {...decoratorProps}
-        />
+        <Icon name={'RadioButtonUnchecked'} height={radioBtnHeight} width={radioBtnWidth} fill={buttonUnselectedFill} />
       )
     case ButtonDecoratorType.RadioDisabled:
       return (
-        <VAIcon
-          name={'RadioEmpty'}
+        <Icon
+          name={'RadioButtonUnchecked'}
           height={radioBtnHeight}
           width={radioBtnWidth}
           fill={theme.colors.icon.radioDisabled}
-          stroke={theme.colors.icon.checkboxDisabled}
-          {...decoratorProps}
         />
       )
     case ButtonDecoratorType.CheckBoxFilled:
       return (
-        <VAIcon
-          name={'CheckBoxFilled'}
+        <Icon
+          name={'CheckBox'}
           height={radioBtnHeight}
           width={radioBtnWidth}
           fill={theme.colors.icon.checkboxEnabledPrimary}
-          {...decoratorProps}
         />
       )
     case ButtonDecoratorType.CheckBoxEmpty:
       return (
-        <VAIcon
-          name={'CheckBoxEmpty'}
+        <Icon
+          name={'CheckBoxOutlineBlank'}
           height={radioBtnHeight}
           width={radioBtnWidth}
           fill={theme.colors.icon.checkboxDisabledContrast}
-          stroke={theme.colors.icon.checkboxDisabled}
-          {...decoratorProps}
         />
       )
 
diff --git a/VAMobile/src/components/ClickForActionLinkDeprecated.tsx b/VAMobile/src/components/ClickForActionLinkDeprecated.tsx
index 010e674bad9..d00200cc072 100644
--- a/VAMobile/src/components/ClickForActionLinkDeprecated.tsx
+++ b/VAMobile/src/components/ClickForActionLinkDeprecated.tsx
@@ -1,19 +1,23 @@
 import React, { FC } from 'react'
 import { AccessibilityProps, TouchableWithoutFeedback, TouchableWithoutFeedbackProps } from 'react-native'
 
+import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
+import { IconMap } from '@department-of-veterans-affairs/mobile-component-library/src/components/Icon/iconList'
+
 import { useExternalLink, useTheme } from 'utils/hooks'
 import { addToCalendar, checkCalendarPermission, requestCalendarPermission } from 'utils/rnCalendar'
 
 import Box from './Box'
 import TextView, { ColorVariant, TextViewProps } from './TextView'
-import VAIcon, { VA_ICON_MAP } from './VAIcon'
 
 /** Icon type for links, defaults to Chat */
 export enum LinkUrlIconType {
   /** Signifies icon with chat bubbles */
   Chat = 'Chat',
   /** Signifies icon with right pointing arrow */
-  Arrow = 'Arrow',
+  Arrow = 'ArrowCircleRight',
+  /** Signifies icon with external links */
+  External = 'Launch',
 }
 
 export const LinkTypeOptionsConstants: {
@@ -74,6 +78,9 @@ export type LinkButtonProps = AccessibilityProps & {
   /** color bypass */
   colorOverride?: string
 
+  /** icon color bypass */
+  iconColorOverride?: string
+
   /** custom onPress */
   customOnPress?: () => void
 
@@ -100,6 +107,7 @@ const ClickForActionLinkDeprecated: FC<LinkButtonProps> = ({
   a11yLabel,
   fireAnalytic,
   colorOverride,
+  iconColorOverride,
   customOnPress,
   hideIcon = false,
   disablePadding = false,
@@ -152,31 +160,33 @@ const ClickForActionLinkDeprecated: FC<LinkButtonProps> = ({
     launchExternalLink(openUrlText)
   }
 
-  const getUrlIcon = (): keyof typeof VA_ICON_MAP => {
+  const getUrlIcon = (): keyof typeof IconMap => {
     switch (linkUrlIconType) {
       case LinkUrlIconType.Arrow:
-        return 'RightArrowInCircle'
+        return 'ArrowCircleRight'
+      case LinkUrlIconType.External:
+        return 'Launch'
       default:
         return 'Chat'
     }
   }
 
-  const getIconName = (): keyof typeof VA_ICON_MAP => {
+  const getIconName = (): keyof typeof IconMap => {
     switch (linkType) {
       case 'call':
-        return 'CirclePhone'
+        return 'Phone'
       case 'callTTY':
-        return 'PhoneTTY'
+        return 'TTY'
       case 'text':
-        return 'Text'
+        return 'PhoneIphone'
       case 'url':
         return getUrlIcon()
       case 'calendar':
-        return 'Calendar'
+        return 'CalendarToday'
       case 'directions':
         return 'Directions'
       case 'externalLink':
-        return 'CircleExternalLink'
+        return 'Launch'
     }
   }
 
@@ -201,13 +211,9 @@ const ClickForActionLinkDeprecated: FC<LinkButtonProps> = ({
       <Box flexDirection={'row'} alignItems={'center'} py={py} pr={pr}>
         {!hideIcon && (
           <Box pr={3}>
-            <VAIcon
-              name={getIconName()}
-              fill={colorOverride ? (colorOverride as ColorVariant) : 'link'}
-              fill2={colorOverride ? 'transparent' : ''}
-              width={25}
-              height={25}
-            />
+            {linkType ? (
+              <Icon name={getIconName()} fill={iconColorOverride ?? theme.colors.icon.link} width={25} height={25} />
+            ) : undefined}
           </Box>
         )}
         <Box flexShrink={1}>
diff --git a/VAMobile/src/components/ClickToCallPhoneNumberDeprecated.tsx b/VAMobile/src/components/ClickToCallPhoneNumberDeprecated.tsx
index b62c1429945..167483f342b 100644
--- a/VAMobile/src/components/ClickToCallPhoneNumberDeprecated.tsx
+++ b/VAMobile/src/components/ClickToCallPhoneNumberDeprecated.tsx
@@ -19,6 +19,8 @@ type ClickToCallPhoneNumberDeprecatedProps = {
   ttyBypass?: boolean
   /** color bypass */
   colorOverride?: string
+  /** icon color bypass */
+  iconColorOverride?: string
   /** optional function to fire analytic events when the link is clicked */
   fireAnalytic?: () => void
 }
@@ -33,6 +35,7 @@ const ClickToCallPhoneNumberDeprecated: FC<ClickToCallPhoneNumberDeprecatedProps
   a11yLabel,
   ttyBypass,
   colorOverride,
+  iconColorOverride,
   fireAnalytic,
 }) => {
   const { t } = useTranslation(NAMESPACE.COMMON)
@@ -49,6 +52,7 @@ const ClickToCallPhoneNumberDeprecated: FC<ClickToCallPhoneNumberDeprecatedProps
     numberOrUrlLink: getNumbersFromString(phoneNumber),
     a11yLabel: a11yLabel || getNumberAccessibilityLabelFromString(phoneNumber),
     colorOverride: colorOverride,
+    iconColorOverride: iconColorOverride,
   }
 
   const ttyProps: LinkButtonProps = {
@@ -57,6 +61,7 @@ const ClickToCallPhoneNumberDeprecated: FC<ClickToCallPhoneNumberDeprecatedProps
     numberOrUrlLink: t('contactVA.tty.number'),
     a11yLabel: t('contactVA.tty.number.a11yLabel'),
     colorOverride: colorOverride,
+    iconColorOverride: iconColorOverride,
   }
 
   return (
diff --git a/VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx b/VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx
index 281cb17cac5..3c768857c4c 100644
--- a/VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx
+++ b/VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx
@@ -1,7 +1,9 @@
 import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { ButtonDecoratorType, List, ListItemObj, VAIconProps } from 'components'
+import { IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+
+import { ButtonDecoratorType, List, ListItemObj } from 'components'
 import { TextLineWithIconProps } from 'components/TextLineWithIcon'
 import { TextLines } from 'components/TextLines'
 import { TextLine } from 'components/types'
@@ -16,7 +18,7 @@ export type PickerListItemObj = {
   /** whether this item is the selected value **/
   isSelected: boolean
   /** icon to show */
-  icon?: VAIconProps
+  icon?: IconProps
 } & Partial<ListItemObj>
 
 /**
diff --git a/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx b/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx
index 7600143c4b8..77dd2678cfd 100644
--- a/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx
+++ b/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx
@@ -11,10 +11,9 @@ import {
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
-import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { Box, BoxProps, TextView, TextViewProps, VAScrollView } from 'components'
-import { VAIconProps } from 'components/VAIcon'
 import { Events } from 'constants/analytics'
 import { a11yHintProp, a11yValueProp } from 'utils/accessibility'
 import { logAnalyticsEvent } from 'utils/analytics'
@@ -40,7 +39,7 @@ export type PickerItem = {
   /** value is the unique value of the item, used to update and keep track of the current label displayed */
   value: string
   /** icon to show */
-  icon?: VAIconProps
+  icon?: IconProps
 }
 
 export type VAModalPickerProps = {
diff --git a/VAMobile/src/components/FormWrapper/FormFields/RadioGroup.test.tsx b/VAMobile/src/components/FormWrapper/FormFields/RadioGroup.test.tsx
index 8743bf4d6d9..ccd3ef83244 100644
--- a/VAMobile/src/components/FormWrapper/FormFields/RadioGroup.test.tsx
+++ b/VAMobile/src/components/FormWrapper/FormFields/RadioGroup.test.tsx
@@ -37,8 +37,8 @@ context('RadioGroup', () => {
 
   it('initializes correctly', () => {
     expect(screen.getAllByRole('radio').length).toEqual(mockOptions.length)
-    expect(screen.getAllByLabelText('RadioEmpty').length).toEqual(mockOptions.length - 1)
-    expect(screen.getAllByLabelText('RadioFilled').length).toEqual(1)
+    expect(screen.getAllByTestId('RadioButtonUnchecked').length).toEqual(mockOptions.length - 1)
+    expect(screen.getAllByTestId('RadioButtonChecked').length).toEqual(1)
   })
 
   it('calls setSelected on press', () => {
diff --git a/VAMobile/src/components/FormWrapper/FormFields/VASelector.test.tsx b/VAMobile/src/components/FormWrapper/FormFields/VASelector.test.tsx
index 64e8a3a65f6..89f2a7e3543 100644
--- a/VAMobile/src/components/FormWrapper/FormFields/VASelector.test.tsx
+++ b/VAMobile/src/components/FormWrapper/FormFields/VASelector.test.tsx
@@ -58,8 +58,7 @@ context('VASelector', () => {
   describe('when selected is true', () => {
     it('should display the filled checkbox and update accessibility state', () => {
       initializeTestInstance(true)
-      expect(screen.getByTestId('CheckBoxFilled')).toBeTruthy()
-      expect(screen.getByLabelText('CheckBoxFilled')).toBeTruthy()
+      expect(screen.getByTestId('CheckBox')).toBeTruthy()
       expect(
         screen.getByAccessibilityState({
           checked: true,
@@ -70,8 +69,7 @@ context('VASelector', () => {
 
   describe('when selected is false', () => {
     it('should display the empty checkbox', () => {
-      expect(screen.getByTestId('CheckBoxEmpty')).toBeTruthy()
-      expect(screen.getByLabelText('CheckBoxEmpty')).toBeTruthy()
+      expect(screen.getByTestId('CheckBoxOutlineBlank')).toBeTruthy()
       expect(
         screen.getByAccessibilityState({
           checked: false,
@@ -93,15 +91,13 @@ context('VASelector', () => {
     it('should display the RadioEmpty', () => {
       initializeTestInstance(false, true, '', SelectorType.Radio)
       expect(screen.getByTestId('RadioEmpty')).toBeTruthy()
-      expect(screen.getByLabelText('RadioEmpty')).toBeTruthy()
     })
   })
 
   describe('when there is an error and the selector type is checkbox', () => {
-    it('should display the CheckBoxError and the error message', () => {
+    it('should display the Error and the error message', () => {
       initializeTestInstance(false, false, 'ERROR MESSAGE')
-      expect(screen.getByTestId('CheckBoxError')).toBeTruthy()
-      expect(screen.getByLabelText('CheckBoxError')).toBeTruthy()
+      expect(screen.getByTestId('Error')).toBeTruthy()
       expect(screen.getByText('ERROR MESSAGE')).toBeTruthy()
     })
   })
diff --git a/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx b/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx
index b0ad1df6900..c73e9fee4bb 100644
--- a/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx
+++ b/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx
@@ -2,12 +2,15 @@ import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TouchableWithoutFeedback } from 'react-native'
 
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
+
 import { VAIconColors, VATextColors } from 'styles/theme'
 import { a11yHintProp } from 'utils/accessibility'
 import { getTranslation } from 'utils/formattingUtils'
 import { useTheme } from 'utils/hooks'
 
-import { Box, BoxProps, TextView, VAIcon, VAIconProps } from '../../index'
+import { Box, BoxProps, TextView } from '../../index'
 import { renderInputError } from './formFieldUtils'
 
 export enum SelectorType {
@@ -74,14 +77,14 @@ const VASelector: FC<VASelectorProps> = ({
     name: string,
     stroke?: keyof VAIconColors | string,
     fill?: keyof VAIconColors | keyof VATextColors | string,
-  ): VAIconProps => {
+  ): IconProps => {
     return {
       name,
       stroke,
       width: iconWidth,
       height: 22,
       fill,
-    } as VAIconProps
+    } as IconProps
   }
 
   const errorBoxProps: BoxProps = {
@@ -94,34 +97,41 @@ const VASelector: FC<VASelectorProps> = ({
   }
 
   const getCheckBoxIcon = (): React.ReactNode => {
+    const buttonSelectedFill =
+      theme.mode === 'dark' ? colors.vadsColorFormsForegroundActiveOnDark : colors.vadsColorFormsForegroundActiveOnLight
+    const buttonUnselectedFill =
+      theme.mode === 'dark' ? colors.vadsColorFormsBorderDefaultOnDark : colors.vadsColorFormsBorderDefaultOnLight
+
     if (disabled && selectorType === SelectorType.Radio) {
       return (
-        <VAIcon
-          {...getIconsProps('RadioEmpty', 'checkboxDisabled', 'radioDisabled')}
+        <Icon
+          {...getIconsProps(
+            'RadioButtonUnchecked',
+            theme.colors.icon.checkboxDisabled,
+            theme.colors.icon.radioDisabled,
+          )}
           testID="RadioEmpty"
-          accessibilityLabel="RadioEmpty"
         />
       )
     }
 
     if (!!error && selectorType === SelectorType.Checkbox) {
       return (
-        <VAIcon
-          {...getIconsProps('CheckBoxError', theme.colors.icon.error, 'checkboxDisabledContrast')}
-          testID="CheckBoxError"
-          accessibilityLabel="CheckBoxError"
+        <Icon
+          {...getIconsProps('Error', theme.colors.icon.error, theme.colors.icon.checkboxDisabledContrast)}
+          testID="Error"
         />
       )
     }
 
-    const filledName = selectorType === SelectorType.Checkbox ? 'CheckBoxFilled' : 'RadioFilled'
-    const emptyName = selectorType === SelectorType.Checkbox ? 'CheckBoxEmpty' : 'RadioEmpty'
+    const filledName = selectorType === SelectorType.Checkbox ? 'CheckBox' : 'RadioButtonChecked'
+    const emptyName = selectorType === SelectorType.Checkbox ? 'CheckBoxOutlineBlank' : 'RadioButtonUnchecked'
 
     const name = selected ? filledName : emptyName
-    const fill = selected ? 'checkboxEnabledPrimary' : 'checkboxDisabledContrast'
-    const stroke = selected ? undefined : 'checkboxDisabled'
+    const fill = selected ? buttonSelectedFill : buttonUnselectedFill
+    const stroke = selected ? undefined : theme.colors.icon.checkboxDisabled
 
-    return <VAIcon {...getIconsProps(name, stroke, fill)} testID={name} accessibilityLabel={name} />
+    return <Icon {...getIconsProps(name, stroke, fill)} testID={name} />
   }
 
   const hintProp = a11yHint ? a11yHintProp(a11yHint) : {}
diff --git a/VAMobile/src/components/InlineTextWithIcons.test.tsx b/VAMobile/src/components/InlineTextWithIcons.test.tsx
index 5aa5fdf1881..2e246c8cc6c 100644
--- a/VAMobile/src/components/InlineTextWithIcons.test.tsx
+++ b/VAMobile/src/components/InlineTextWithIcons.test.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
 
+import { IconProps } from '@department-of-veterans-affairs/mobile-component-library'
 import { screen } from '@testing-library/react-native'
 
 import { Box, InlineTextWithIconsProps } from 'components'
 import { context, render } from 'testUtils'
 
 import InlineTextWithIcons from './InlineTextWithIcons'
-import { VAIconProps } from './VAIcon'
+import Unread from './VAIcon/svgs/Unread.svg'
 
 context('InlineTextWithIcons', () => {
   beforeEach(() => {
@@ -16,7 +17,13 @@ context('InlineTextWithIcons', () => {
         variant: 'MobileBodyBold',
         textAlign: 'left',
       },
-      leftIconProps: { name: 'Unread', width: 16, height: 16, isOwnLine: true, testID: 'Unread' } as VAIconProps,
+      leftIconProps: {
+        svg: Unread,
+        width: 16,
+        height: 16,
+        isOwnLine: true,
+        testID: 'Unread',
+      } as IconProps,
     } as InlineTextWithIconsProps
     const testLine2 = {
       leftTextProps: {
@@ -33,14 +40,14 @@ context('InlineTextWithIcons', () => {
         textAlign: 'left',
         color: 'primary',
       },
-      leftIconProps: { name: 'PaperClip', fill: 'spinner', width: 16, height: 16, testID: 'PaperClip' } as VAIconProps,
+      leftIconProps: { name: 'AttachFile', width: 16, height: 16, testID: 'AttachFile' } as IconProps,
       rightIconProps: {
         name: 'Chat',
         width: 16,
         height: 16,
         fill: 'spinner',
         testID: 'Chat',
-      } as VAIconProps,
+      } as IconProps,
     } as InlineTextWithIconsProps
 
     render(
@@ -60,7 +67,7 @@ context('InlineTextWithIcons', () => {
 
   it('renders icons', () => {
     expect(screen.getByTestId('Unread')).toBeTruthy()
-    expect(screen.getByTestId('PaperClip')).toBeTruthy()
+    expect(screen.getByTestId('AttachFile')).toBeTruthy()
     expect(screen.getByTestId('Chat')).toBeTruthy()
   })
 })
diff --git a/VAMobile/src/components/InlineTextWithIcons.tsx b/VAMobile/src/components/InlineTextWithIcons.tsx
index 1f4f43a97b1..b45779379da 100644
--- a/VAMobile/src/components/InlineTextWithIcons.tsx
+++ b/VAMobile/src/components/InlineTextWithIcons.tsx
@@ -1,10 +1,11 @@
 import React, { FC } from 'react'
 
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+
 import { useTheme } from 'utils/hooks'
 
 import Box from './Box'
 import TextView from './TextView'
-import VAIcon, { VAIconProps } from './VAIcon'
 import { InlineText } from './types'
 
 export type InlineTextWithIconsProps = {
@@ -12,10 +13,10 @@ export type InlineTextWithIconsProps = {
   inlineIcon?: boolean
 
   /** Props for icon you want to display in this line of text */
-  leftIconProps?: VAIconProps
+  leftIconProps?: IconProps
 
   /** Props for icon you want to display in this line of text */
-  rightIconProps?: VAIconProps
+  rightIconProps?: IconProps
 } & InlineText
 
 /**Common component to show an icon with a line of text*/
@@ -27,27 +28,42 @@ export const InlineTextWithIcons: FC<InlineTextWithIconsProps> = ({
   rightTextProps,
 }) => {
   const theme = useTheme()
+
   return (
-    <Box flexDirection={'row'} flexGrow={1}>
+    <Box flexDirection={'row'} flexGrow={1} alignItems="center">
       {!inlineIcon && leftIconProps && (
-        <Box mt={7} mr={theme.dimensions.condensedMarginBetween}>
-          <VAIcon
+        <Box mr={theme.dimensions.condensedMarginBetween}>
+          {leftIconProps?.svg ? (
+            <Icon
+              svg={leftIconProps.svg}
+              width={leftIconProps.width ?? 24}
+              height={leftIconProps.height ?? 24}
+              fill={leftIconProps.fill}
+              testID={leftIconProps.testID}
+            />
+          ) : leftIconProps?.name ? (
+            <Icon
+              name={leftIconProps.name}
+              width={leftIconProps.width ?? 24}
+              height={leftIconProps.height ?? 24}
+              fill={leftIconProps.fill}
+              testID={leftIconProps.testID}
+            />
+          ) : null}
+        </Box>
+      )}
+      {inlineIcon && leftIconProps ? (
+        leftIconProps.svg ? (
+          <Icon svg={leftIconProps.svg} fill={leftIconProps.fill} testID={leftIconProps.testID} />
+        ) : leftIconProps.name ? (
+          <Icon
             name={leftIconProps.name}
-            width={leftIconProps.width}
-            height={leftIconProps.height}
+            width={leftIconProps.width ?? 24}
+            height={leftIconProps.height ?? 24}
             fill={leftIconProps.fill}
             testID={leftIconProps.testID}
           />
-        </Box>
-      )}
-      {inlineIcon && leftIconProps ? (
-        <VAIcon
-          name={leftIconProps.name}
-          width={leftIconProps.width}
-          height={leftIconProps.height}
-          fill={leftIconProps.fill}
-          testID={leftIconProps.testID}
-        />
+        ) : null
       ) : (
         <TextView
           mr={theme.dimensions.condensedMarginBetween}
@@ -69,10 +85,10 @@ export const InlineTextWithIcons: FC<InlineTextWithIconsProps> = ({
       )}
       {rightIconProps && (
         <Box mt={7}>
-          <VAIcon
-            name={rightIconProps.name}
-            width={rightIconProps.width}
-            height={rightIconProps.height}
+          <Icon
+            name={rightIconProps.name ?? 'Close'}
+            width={rightIconProps.width ?? 24}
+            height={rightIconProps.height ?? 24}
             fill={rightIconProps.fill}
             testID={rightIconProps.testID}
           />
diff --git a/VAMobile/src/components/LinkWithAnalytics.tsx b/VAMobile/src/components/LinkWithAnalytics.tsx
index 3a9f4e949c8..2a2ba668d45 100644
--- a/VAMobile/src/components/LinkWithAnalytics.tsx
+++ b/VAMobile/src/components/LinkWithAnalytics.tsx
@@ -70,6 +70,8 @@ const LinkWithAnalytics = ({ analyticsOnPress, analyticsProps, disablePadding, .
       return <TextView>ERROR: Type "attachment" not supported with useOldLinkComponent enabled</TextView>
     } else if (props.type === 'call TTY') {
       linkType = 'callTTY'
+    } else if (props.type === 'url') {
+      linkType = 'externalLink'
     } else {
       linkType = props.type
     }
@@ -85,7 +87,7 @@ const LinkWithAnalytics = ({ analyticsOnPress, analyticsProps, disablePadding, .
         displayedText={props.text}
         linkType={LinkTypeOptionsConstants[linkType as keyof typeof LinkTypeOptionsConstants]}
         numberOrUrlLink={props.url || props.phoneNumber || props.TTYnumber || props.textNumber || directionsURL}
-        linkUrlIconType={LinkUrlIconType.Arrow}
+        linkUrlIconType={LinkUrlIconType.External}
         a11yLabel={props.a11yLabel || props.text}
         fireAnalytic={() => {
           props.analytics?.onPress?.()
diff --git a/VAMobile/src/components/MessageList.test.tsx b/VAMobile/src/components/MessageList.test.tsx
index 4617c9fb96c..3cc702f9983 100644
--- a/VAMobile/src/components/MessageList.test.tsx
+++ b/VAMobile/src/components/MessageList.test.tsx
@@ -6,6 +6,7 @@ import { InlineTextWithIconsProps, MessageListItemObj, TextLine } from 'componen
 import { context, render } from 'testUtils'
 
 import MessageList from './MessageList'
+import Unread from './VAIcon/svgs/Unread.svg'
 
 context('MessageList', () => {
   const onPressSpy = jest.fn(() => {})
@@ -30,11 +31,11 @@ context('MessageList', () => {
         inlineTextWithIcons: [
           {
             leftTextProps: { text: 'test2-sender' },
-            leftIconProps: { name: 'Unread', width: 16, height: 16, testID: 'Unread' },
+            leftIconProps: { svg: Unread, width: 16, height: 16, testID: 'Unread' },
           },
           {
             leftTextProps: { text: 'test2-subject-line' },
-            leftIconProps: { name: 'PaperClip', width: 16, height: 16, testID: 'PaperClip' },
+            leftIconProps: { name: 'AttachFile', width: 16, height: 16, testID: 'AttachFile' },
           },
         ],
         isSentFolder: false,
@@ -76,9 +77,9 @@ context('MessageList', () => {
     expect(screen.findByText('Read')).toBeTruthy()
   })
 
-  it('should render the VAIcon components for unread item with attachment', () => {
+  it('should render the Icon components for unread item with attachment', () => {
     expect(screen.getByTestId('Unread')).toBeTruthy()
-    expect(screen.getByTestId('PaperClip')).toBeTruthy()
+    expect(screen.getByTestId('AttachFile')).toBeTruthy()
   })
 
   it('should render chevron icons', () => {
diff --git a/VAMobile/src/components/SelectionList/SelectionList.tsx b/VAMobile/src/components/SelectionList/SelectionList.tsx
index b371b749b5f..e2e11151ce0 100644
--- a/VAMobile/src/components/SelectionList/SelectionList.tsx
+++ b/VAMobile/src/components/SelectionList/SelectionList.tsx
@@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, PressableProps } from 'react-native'
 
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
 import { mapObject, values } from 'underscore'
 
 import { Events } from 'constants/analytics'
@@ -11,7 +12,6 @@ import { useTheme } from 'utils/hooks'
 
 import Box, { BoxProps } from '../Box'
 import TextView from '../TextView'
-import VAIcon, { VAIconProps, VA_ICON_MAP } from '../VAIcon'
 import SelectionListItem, { SelectionListItemObj } from './SelectionListItem'
 
 export type SelectionListProps = {
@@ -82,29 +82,19 @@ const SelectionList: FC<SelectionListProps> = ({ items, onSelectionChange }) =>
   }
 
   const getSelectAllIcon = () => {
-    let name: keyof typeof VA_ICON_MAP
-    let fill = 'checkboxEnabledPrimary'
-    let stroke
-    if (numSelected === items.length) {
-      name = 'CheckBoxFilled'
-    } else if (numSelected > 0) {
-      name = 'CheckBoxIntermediate'
-    } else {
-      name = 'CheckBoxEmpty'
-      fill = 'checkboxDisabledContrast'
-      stroke = 'checkboxDisabled'
-    }
+    const fill = numSelected > 0 ? theme.colors.icon.checkboxEnabledPrimary : theme.colors.icon.checkboxDisabled
+
+    const name =
+      numSelected === items.length ? 'CheckBox' : numSelected > 0 ? 'IndeterminateCheckBox' : 'CheckBoxOutlineBlank'
 
-    const iconProps: VAIconProps = {
+    const iconProps: IconProps = {
       name,
       width: 20,
       height: 20,
-      stroke,
       fill,
-      ml: 20,
     }
 
-    return <VAIcon {...iconProps} />
+    return <Icon {...iconProps} />
   }
 
   const headerWrapperProps: BoxProps = {
diff --git a/VAMobile/src/components/SelectionList/SelectionListItem.tsx b/VAMobile/src/components/SelectionList/SelectionListItem.tsx
index 58ae0b5a7c7..8f6e4e1ae5e 100644
--- a/VAMobile/src/components/SelectionList/SelectionListItem.tsx
+++ b/VAMobile/src/components/SelectionList/SelectionListItem.tsx
@@ -1,10 +1,11 @@
 import React, { FC } from 'react'
 import { Pressable } from 'react-native'
 
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+
 import { useTheme } from 'utils/hooks'
 
 import Box, { BoxProps } from '../Box'
-import VAIcon, { VAIconProps, VA_ICON_MAP } from '../VAIcon'
 
 export type SelectionListItemObj = {
   /** Display content for the list item */
@@ -31,29 +32,20 @@ const SelectionListItem: FC<SelectionListItemProps> = ({ content, setSelectedFn,
   }
 
   const getIcon = () => {
-    let name: keyof typeof VA_ICON_MAP
-    let fill = 'checkboxEnabledPrimary'
-    let stroke
+    let fill = theme.colors.icon.checkboxEnabledPrimary
 
-    if (isSelected) {
-      name = 'CheckBoxFilled'
-    } else {
-      name = 'CheckBoxEmpty'
-      fill = 'checkboxDisabledContrast'
-      stroke = 'checkboxDisabled'
+    if (!isSelected) {
+      fill = theme.colors.icon.checkboxDisabled
     }
 
-    const iconProps: VAIconProps = {
-      name,
+    const iconProps: IconProps = {
+      name: isSelected ? 'CheckBox' : 'CheckBoxOutlineBlank',
       width: 20,
       height: 20,
-      stroke,
       fill,
-      ml: 20,
-      pt: 5,
     }
 
-    return <VAIcon {...iconProps} />
+    return <Icon {...iconProps} />
   }
 
   return (
diff --git a/VAMobile/src/components/SnackBar.tsx b/VAMobile/src/components/SnackBar.tsx
index 7bb9178fb23..1f7cf3ff2dd 100644
--- a/VAMobile/src/components/SnackBar.tsx
+++ b/VAMobile/src/components/SnackBar.tsx
@@ -7,6 +7,8 @@ import { ToastProps } from 'react-native-toast-notifications/lib/typescript/toas
 
 import { useFocusEffect } from '@react-navigation/native'
 
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+
 import { Box, TextViewProps, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { triggerHaptic } from 'utils/haptics'
@@ -14,7 +16,6 @@ import { useAccessibilityFocus, useTheme } from 'utils/hooks'
 
 import { BoxProps } from './Box'
 import TextView from './TextView'
-import VAIcon, { VAIconProps } from './VAIcon'
 
 export type SnackbarMessages = {
   successMsg: string
@@ -118,18 +119,15 @@ const SnackBar: FC<ToastProps> = (toast) => {
     toast.onHide()
   }
 
-  const snackBarIconProps: VAIconProps = {
-    name: isError ? 'ExclamationTriangle' : 'CircleCheckMark',
+  const snackBarIconProps: IconProps = {
+    name: isError ? 'Warning' : 'CheckCircle',
     fill: themeColor.icon.snackBarIcon,
-    fill2: 'transparent',
     height: 18,
     width: 18,
   }
 
   const iconWrapperBoxProps: BoxProps = {
     mr: 8,
-    alignSelf: 'flex-start',
-    mt: 2,
   }
 
   const vibrate = (): void => {
@@ -148,7 +146,7 @@ const SnackBar: FC<ToastProps> = (toast) => {
             <View accessible={true} accessibilityRole={'alert'} ref={focusRef}>
               <Box {...messageContainerProps}>
                 <Box {...iconWrapperBoxProps}>
-                  <VAIcon {...snackBarIconProps} />
+                  <Icon {...snackBarIconProps} />
                 </Box>
                 <TextView {...messageProp}>{message}</TextView>
               </Box>
diff --git a/VAMobile/src/components/Templates/FullScreenSubtask.test.tsx b/VAMobile/src/components/Templates/FullScreenSubtask.test.tsx
index 076d4665877..3f5982f809e 100644
--- a/VAMobile/src/components/Templates/FullScreenSubtask.test.tsx
+++ b/VAMobile/src/components/Templates/FullScreenSubtask.test.tsx
@@ -24,7 +24,7 @@ context('FullScreenSubtask', () => {
         title={titleText}
         leftButtonText={leftButtonText}
         rightButtonText={rightButtonText}
-        rightVAIconProps={rightIconProps}
+        rightIconProps={rightIconProps}
         primaryContentButtonText={primaryContentButtonText}
         onPrimaryContentButtonPress={onPrimaryButtonPress}
         secondaryContentButtonText={secondaryContentButtonText}
diff --git a/VAMobile/src/components/Templates/FullScreenSubtask.tsx b/VAMobile/src/components/Templates/FullScreenSubtask.tsx
index 79c8b5a8319..d751d38f721 100644
--- a/VAMobile/src/components/Templates/FullScreenSubtask.tsx
+++ b/VAMobile/src/components/Templates/FullScreenSubtask.tsx
@@ -45,7 +45,7 @@ export type FullScreenSubtaskProps = {
   /** Optional TestID for right button */
   rightButtonTestID?: string
   /** icon for title bar right button(must have right button text to display) */
-  rightVAIconProps?: IconProps
+  rightIconProps?: IconProps
   /** ref for the VAScrollView component that contains the content */
   scrollViewRef?: Ref<ScrollView>
   /** shows the menu icon with the specified action types (won't be shown if right button text is set) */
@@ -80,7 +80,7 @@ export const FullScreenSubtask: FC<FullScreenSubtaskProps> = ({
   onRightButtonPress,
   rightButtonA11yLabel,
   rightButtonTestID,
-  rightVAIconProps,
+  rightIconProps,
   scrollViewRef,
   menuViewActions,
   primaryContentButtonText,
@@ -169,7 +169,7 @@ export const FullScreenSubtask: FC<FullScreenSubtaskProps> = ({
           a11yLabel: rightButtonA11yLabel,
           testID: rightButtonTestID,
           onPress: onRightTitleButtonPress,
-          icon: rightVAIconProps,
+          icon: rightIconProps,
         }
       : undefined,
     menuViewActions,
diff --git a/VAMobile/src/components/TextLineWithIcon.test.tsx b/VAMobile/src/components/TextLineWithIcon.test.tsx
index c7f379ff44f..d1961ec56d2 100644
--- a/VAMobile/src/components/TextLineWithIcon.test.tsx
+++ b/VAMobile/src/components/TextLineWithIcon.test.tsx
@@ -1,22 +1,23 @@
 import React from 'react'
 
+import { IconProps } from '@department-of-veterans-affairs/mobile-component-library'
 import { screen } from '@testing-library/react-native'
 
 import { Box } from 'components'
 import { context, render } from 'testUtils'
 
 import TextLineWithIcon from './TextLineWithIcon'
-import { VAIconProps } from './VAIcon'
+import Unread from './VAIcon/svgs/Unread.svg'
 
 context('TextLineWithIcon', () => {
   beforeEach(() => {
     const testLine1 = {
       text: 'line1',
-      iconProps: { name: 'Trash', width: 16, height: 16, testID: 'Trash' } as VAIconProps,
+      iconProps: { name: 'Delete', width: 16, height: 16, testID: 'Delete' } as IconProps,
     }
     const testLine2 = {
       text: 'another line2',
-      iconProps: { name: 'Unread', width: 16, height: 16, testID: 'Unread', isOwnLine: true } as VAIconProps,
+      iconProps: { svg: Unread, width: 16, height: 16, testID: 'Unread', isOwnLine: true } as IconProps,
     }
     const testLine3 = { text: 'line3 no iconProps' }
 
@@ -29,8 +30,8 @@ context('TextLineWithIcon', () => {
     )
   })
 
-  it('renders correct VAIcons', () => {
-    expect(screen.getByTestId('Trash')).toBeTruthy()
+  it('renders correct Icons', () => {
+    expect(screen.getByTestId('Delete')).toBeTruthy()
     expect(screen.getByTestId('Unread')).toBeTruthy()
   })
 
diff --git a/VAMobile/src/components/TextLineWithIcon.tsx b/VAMobile/src/components/TextLineWithIcon.tsx
index 788630fbaae..c1299ba9ee1 100644
--- a/VAMobile/src/components/TextLineWithIcon.tsx
+++ b/VAMobile/src/components/TextLineWithIcon.tsx
@@ -1,15 +1,16 @@
 import React, { FC } from 'react'
 
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+
 import { useTheme } from 'utils/hooks'
 
 import Box from './Box'
 import TextView from './TextView'
-import VAIcon, { VAIconProps } from './VAIcon'
 import { TextLine } from './types'
 
 export type TextLineWithIconProps = {
   /** Props for icon you want to display in this line of text */
-  iconProps?: VAIconProps & {
+  iconProps?: IconProps & {
     /** If the icon is supposed to appear on its own line (ex: read tag) */
     isOwnLine?: boolean
   }
@@ -25,15 +26,23 @@ export const TextLineWithIcon: FC<TextLineWithIconProps> = ({ iconProps, text, v
       <Box
         ml={iconNotOwnRow ? 0 : themes.dimensions.listItemDecoratorMarginLeft}
         mr={themes.dimensions.condensedMarginBetween}>
-        {iconProps && (
-          <VAIcon
+        {iconProps?.svg ? (
+          <Icon
+            svg={iconProps.svg}
+            width={iconProps.width ?? 24}
+            height={iconProps.height ?? 24}
+            fill={iconProps.fill}
+            testID={iconProps.testID}
+          />
+        ) : iconProps?.name ? (
+          <Icon
             name={iconProps.name}
-            width={iconProps.width}
-            height={iconProps.height}
+            width={iconProps.width ?? 24}
+            height={iconProps.height ?? 24}
             fill={iconProps.fill}
             testID={iconProps.testID}
           />
-        )}
+        ) : null}
         {!iconProps && <Box mr={16} />}
       </Box>
       {iconNotOwnRow && (
diff --git a/VAMobile/src/components/TextView.tsx b/VAMobile/src/components/TextView.tsx
index 9d73041ab06..1c915960e5b 100644
--- a/VAMobile/src/components/TextView.tsx
+++ b/VAMobile/src/components/TextView.tsx
@@ -22,7 +22,7 @@ export type ColorVariant = keyof VATextColors
 export type TextViewProps = AccessibilityProps &
   BoxProps & {
     /** Defaults to primary text */
-    color?: ColorVariant
+    color?: string
 
     /** Defaults to regular */
     variant?: FontVariant
@@ -34,7 +34,7 @@ export type TextViewProps = AccessibilityProps &
     textDecoration?: 'none' | 'underline' | 'line-through' | 'underline line-through'
 
     /** text decoration color */
-    textDecorationColor?: ColorVariant
+    textDecorationColor?: string
 
     /** onPress callback */
     onPress?: () => void
diff --git a/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx b/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx
index 05ce83d1475..037d2106ae9 100644
--- a/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx
+++ b/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx
@@ -35,7 +35,7 @@ const getWebViewLink = (
   return (
     <LinkWithAnalytics
       type="custom"
-      icon={{ name: 'Launch' }}
+      icon={{ name: 'Launch', fill: 'default' }}
       onPress={() => {
         navigateTo('Webview', {
           url,
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
index 48b252029ae..01607306e84 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
@@ -37,7 +37,6 @@ import {
   LoadingComponent,
   PickerItem,
   TextView,
-  VAIconProps,
   VAModalPicker,
 } from 'components'
 import { SnackbarMessages } from 'components/SnackBar'
@@ -237,14 +236,14 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) {
       const label = folder.attributes.name
 
       const icon = {
-        fill: 'defaultMenuItem',
+        fill: 'base',
         height: theme.fontSizes.MobileBody.fontSize,
         width: theme.fontSizes.MobileBody.fontSize,
         name: 'Folder',
-      } as VAIconProps
+      } as IconProps
 
       if (label === FolderNameTypeConstants.inbox) {
-        icon.fill = 'defaultMenuItem'
+        icon.fill = 'base'
         icon.name = 'Inbox'
       }
 
diff --git a/VAMobile/src/screens/HomeScreen/VeteranStatusScreen/VeteranStatusScreen.tsx b/VAMobile/src/screens/HomeScreen/VeteranStatusScreen/VeteranStatusScreen.tsx
index 496e2606237..f566663e771 100644
--- a/VAMobile/src/screens/HomeScreen/VeteranStatusScreen/VeteranStatusScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/VeteranStatusScreen/VeteranStatusScreen.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import { map } from 'underscore'
 
 import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices'
@@ -173,6 +174,7 @@ function VeteranStatusScreen({ navigation }: VeteranStatusScreenProps) {
             phone={t('8008271000')}
             displayedText={displayedTextPhoneNumber(t('8008271000'))}
             colorOverride={'veteranStatus'}
+            iconColorOverride={colors.vadsColorWhite}
           />
           <TextView variant="MobileBody" color="primaryContrast" my={theme.dimensions.condensedMarginBetween}>
             {t('veteranStatus.fixAnError.3')}
@@ -181,6 +183,7 @@ function VeteranStatusScreen({ navigation }: VeteranStatusScreenProps) {
             phone={t('8005389552')}
             displayedText={displayedTextPhoneNumber(t('8005389552'))}
             colorOverride={'veteranStatus'}
+            iconColorOverride={colors.vadsColorWhite}
             ttyBypass={true}
           />
         </Box>
diff --git a/VAMobile/src/utils/appointments.tsx b/VAMobile/src/utils/appointments.tsx
index 41d12a82d5e..31f53a9576a 100644
--- a/VAMobile/src/utils/appointments.tsx
+++ b/VAMobile/src/utils/appointments.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react'
 
+import { IconProps } from '@department-of-veterans-affairs/mobile-component-library'
 import { TFunction } from 'i18next'
 import { DateTime } from 'luxon'
 import _ from 'underscore'
@@ -18,7 +19,7 @@ import {
   AppointmentsList,
   AppointmentsMetaPagination,
 } from 'api/types'
-import { Box, DefaultList, DefaultListItemObj, TextLineWithIconProps, VAIconProps } from 'components'
+import { Box, DefaultList, DefaultListItemObj, TextLineWithIconProps } from 'components'
 import { VATheme, VATypographyThemeVariants } from 'styles/theme'
 
 import { LabelTagTypeConstants } from '../components/LabelTag'
@@ -153,32 +154,33 @@ export const pendingType = (type: AppointmentType, t: TFunction, phoneOnly: bool
  * @param phoneOnly - boolean tells if the appointment is a phone call
  * @param theme - type VATheme, the theme object to set some properties
  *
- * @returns VAIconProps or undefined
+ * @returns IconProps or undefined
  */
 export const getAppointmentTypeIcon = (
   type: AppointmentType,
   phoneOnly: boolean,
   theme: VATheme,
-): VAIconProps | undefined => {
+): IconProps | undefined => {
   const iconProps = {
     fill: theme.colors.icon.defaultMenuItem,
     height: theme.fontSizes.HelperText.fontSize,
     width: theme.fontSizes.HelperText.fontSize,
-  } as VAIconProps
-
+  } as IconProps
   switch (type) {
     case AppointmentTypeConstants.VA_VIDEO_CONNECT_ATLAS:
     case AppointmentTypeConstants.VA_VIDEO_CONNECT_ONSITE:
-      return { ...iconProps, name: 'Building' }
+      return { ...iconProps, name: 'LocationCity' } as IconProps
     case AppointmentTypeConstants.VA_VIDEO_CONNECT_HOME:
     case AppointmentTypeConstants.VA_VIDEO_CONNECT_GFE:
-      return { ...iconProps, name: 'VideoCamera' }
+      return { ...iconProps, name: 'Videocam' } as IconProps
     case AppointmentTypeConstants.VA:
-      return phoneOnly ? { ...iconProps, name: 'Phone' } : { ...iconProps, name: 'Building' }
+      return phoneOnly
+        ? ({ ...iconProps, name: 'Phone' } as IconProps)
+        : ({ ...iconProps, name: 'LocationCity' } as IconProps)
     case AppointmentTypeConstants.COMMUNITY_CARE:
       return undefined
     default:
-      return phoneOnly ? { ...iconProps, name: 'Phone' } : undefined
+      return phoneOnly ? ({ ...iconProps, name: 'Phone' } as IconProps) : undefined
   }
 }
 
diff --git a/VAMobile/src/utils/common.ts b/VAMobile/src/utils/common.ts
index e96305f9628..5fc59822c36 100644
--- a/VAMobile/src/utils/common.ts
+++ b/VAMobile/src/utils/common.ts
@@ -65,10 +65,11 @@ export const generateTestIDForInlineTextIconList = (
   const listOfTextID: Array<string> = []
 
   listOfText.forEach((listOfTextItem: InlineTextWithIconsProps) => {
-    if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.name === 'Unread') {
+    // NOTE: The Unread icon is a local svg file
+    if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.svg) {
       listOfTextID.push(t('secureMessaging.unread.a11y'))
     }
-    if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.name === 'PaperClip') {
+    if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.name === 'AttachFile') {
       listOfTextID.push(t('secureMessaging.attachments.hasAttachment'))
     }
     listOfTextID.push(listOfTextItem.leftTextProps.text)
@@ -88,10 +89,10 @@ export const generateTestIDForTextIconList = (listOfText: Array<TextLineWithIcon
   const listOfTextID: Array<string> = []
 
   listOfText.forEach((listOfTextItem: TextLineWithIconProps) => {
-    if (listOfTextItem.iconProps && listOfTextItem.iconProps.name === 'Unread') {
+    if (listOfTextItem.iconProps && listOfTextItem.iconProps.svg) {
       listOfTextID.push(t('secureMessaging.unread.a11y'))
     }
-    if (listOfTextItem.iconProps && listOfTextItem.iconProps.name === 'PaperClip') {
+    if (listOfTextItem.iconProps && listOfTextItem.iconProps.name === 'AttachFile') {
       listOfTextID.push(t('secureMessaging.attachments.hasAttachment'))
     }
     listOfTextID.push(listOfTextItem.text)
diff --git a/VAMobile/src/utils/secureMessaging.tsx b/VAMobile/src/utils/secureMessaging.tsx
index fb8248e22b2..05f683cbc4e 100644
--- a/VAMobile/src/utils/secureMessaging.tsx
+++ b/VAMobile/src/utils/secureMessaging.tsx
@@ -4,20 +4,14 @@ import DocumentPicker from 'react-native-document-picker'
 import { Asset, launchCamera, launchImageLibrary } from 'react-native-image-picker'
 import { ImagePickerResponse } from 'react-native-image-picker/src/types'
 
+import { IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import { ActionSheetOptions } from '@expo/react-native-action-sheet'
 import { TFunction } from 'i18next'
 import _ from 'underscore'
 
 import { CategoryTypeFields, CategoryTypes, SecureMessagingFolderList, SecureMessagingMessageList } from 'api/types'
-import {
-  Box,
-  InlineTextWithIconsProps,
-  LinkWithAnalytics,
-  MessageListItemObj,
-  PickerItem,
-  TextView,
-  VAIconProps,
-} from 'components'
+import { Box, InlineTextWithIconsProps, LinkWithAnalytics, MessageListItemObj, PickerItem, TextView } from 'components'
 import { Events } from 'constants/analytics'
 import { EMAIL_REGEX_EXP, MAIL_TO_REGEX_EXP, PHONE_REGEX_EXP, URL2_REGEX_EXP, URL_REGEX_EXP } from 'constants/common'
 import {
@@ -37,6 +31,7 @@ import {
   stringToTitleCase,
 } from 'utils/formattingUtils'
 
+import Unread from '../components/VAIcon/svgs/Unread.svg'
 import { logAnalyticsEvent, logNonFatalErrorToFirebase } from './analytics'
 import { generateTestIDForInlineTextIconList, isErrorObject } from './common'
 import { imageDocumentResponseType, useDestructiveActionSheetProps } from './hooks'
@@ -56,14 +51,21 @@ export const getMessagesListItems = (
     const isSentFolder = folderName === FolderNameTypeConstants.sent
     const isDraftsFolder = folderName === FolderNameTypeConstants.drafts
     const isOutbound = isSentFolder || isDraftsFolder
-
+    const attachFileIconColor =
+      theme.mode === 'dark' ? colors.vadsColorFormsBorderDefaultOnDark : colors.vadsColorFormsBorderDefaultOnLight
     const unreadIconProps =
       readReceipt !== READ && !isOutbound
-        ? ({ name: 'Unread', width: 16, height: 16, fill: theme.colors.icon.unreadMessage } as VAIconProps)
+        ? ({ svg: Unread, height: 16, width: 16, testID: 'Unread' } as IconProps)
         : undefined
     const paperClipProps =
       hasAttachments || attachment
-        ? ({ name: 'PaperClip', fill: 'spinner', width: 16, height: 16 } as VAIconProps)
+        ? ({
+            name: 'AttachFile',
+            width: 21,
+            height: 21,
+            fill: attachFileIconColor,
+            testID: 'AttachFile',
+          } as IconProps)
         : undefined
 
     const textLines: Array<InlineTextWithIconsProps> = [