Use new icons on notifications screen (#4299)

* use new icons on notif screen

* replace placeholder icon too

* cull unused legacy icons

assets/icons/personPlus_filled_stroke2_corner0_rounded.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H15a3 3 0 1 1 0-6c0-.824.332-1.571.87-2.113C14.739 12.32 13.435 12 12 12Zm6 2a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

src/components/icons/Person.tsx

···
 export const PersonPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM5.678 19c.71-2.909 3.092-5 6.322-5 .621 0 1.206.077 1.748.218a1 1 0 1 0 .504-1.936A8.931 8.931 0 0 0 12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H11a1 1 0 1 0 0-2H5.678ZM18 14a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z',
 })
+
+export const PersonPlus_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H15a3 3 0 1 1 0-6c0-.824.332-1.571.87-2.113C14.739 12.32 13.435 12 12 12Zm6 2a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z',
+})

src/components/icons/common.ts

···
 import {StyleSheet, TextProps} from 'react-native'
-import type {SvgProps, PathProps} from 'react-native-svg'
+import type {PathProps, SvgProps} from 'react-native-svg'
 
 import {tokens} from '#/alf'
 

src/lib/icons.tsx

···
 import {StyleProp, TextStyle, ViewStyle} from 'react-native'
 import Svg, {Ellipse, Line, Path, Rect} from 'react-native-svg'
 
-export function GridIcon({
-  style,
-  solid,
-}: {
-  style?: StyleProp<ViewStyle>
-  solid?: boolean
-}) {
-  const DIM = 4
-  const ARC = 2
-  return (
-    <Svg width="24" height="24" style={style}>
-      <Path
-        d={`M4,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
-        strokeWidth={2}
-        stroke="#000"
-        fill={solid ? '#000' : undefined}
-      />
-      <Path
-        d={`M16,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
-        strokeWidth={2}
-        stroke="#000"
-        fill={solid ? '#000' : undefined}
-      />
-      <Path
-        d={`M4,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
-        strokeWidth={2}
-        stroke="#000"
-        fill={solid ? '#000' : undefined}
-      />
-      <Path
-        d={`M16,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
-        strokeWidth={2}
-        stroke="#000"
-        fill={solid ? '#000' : undefined}
-      />
-    </Svg>
-  )
-}
-export function GridIconSolid({style}: {style?: StyleProp<ViewStyle>}) {
-  return <GridIcon style={style} solid />
-}
-
-export function HomeIcon({
-  style,
-  size,
-  strokeWidth = 4,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      viewBox="0 0 48 48"
-      width={size || 24}
-      height={size || 24}
-      stroke="currentColor"
-      fill="none"
-      style={style}>
-      <Path
-        strokeWidth={strokeWidth}
-        d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z"
-      />
-    </Svg>
-  )
-}
-
-export function HomeIconSolid({
-  style,
-  size,
-  strokeWidth = 4,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      viewBox="0 0 48 48"
-      width={size || 24}
-      height={size || 24}
-      stroke="currentColor"
-      style={style}>
-      <Path
-        fill="currentColor"
-        strokeWidth={strokeWidth}
-        d="m 23.951,2 c -0.32,0.011 -0.628,0.124 -0.879,0.322 L 8.859,13.52 C 7.055,14.941 6,17.114 6,19.41 V 38.5 C 6,39.864 7.136,41 8.5,41 h 8 c 1.364,0 2.5,-1.136 2.5,-2.5 v -12 C 19,26.205 19.205,26 19.5,26 h 9 c 0.295,0 0.5,0.205 0.5,0.5 v 12 c 0,1.364 1.136,2.5 2.5,2.5 h 8 C 40.864,41 42,39.864 42,38.5 V 19.41 c 0,-2.296 -1.055,-4.469 -2.859,-5.89 L 24.928,2.322 C 24.65,2.103 24.304,1.989 23.951,2 Z"
-      />
-    </Svg>
-  )
-}
-
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
 export function MagnifyingGlassIcon({
···
   )
 }
 
-export function MagnifyingGlassIcon2Solid({
-  style,
-  size,
-  strokeWidth = 2,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Ellipse
-        cx="12"
-        cy="10.5"
-        rx="6.5"
-        ry="6.5"
-        stroke="none"
-        fill="currentColor"
-      />
-      <Ellipse cx="12" cy="10.5" rx="9" ry="9" />
-      <Line x1="18.5" y1="17" x2="22" y2="20.5" strokeLinecap="round" />
-    </Svg>
-  )
-}
-
-// https://github.com/Remix-Design/RemixIcon/blob/master/License
-export function BellIcon({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      width={size || 24}
-      height={size || 24}
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      style={style}>
-      <Path d="M 11.642 2 H 12.442 A 8.6 8.55 0 0 1 21.042 10.55 V 18.1 A 1 1 0 0 1 20.042 19.1 H 4.042 A 1 1 0 0 1 3.042 18.1 V 10.55 A 8.6 8.55 0 0 1 11.642 2 Z" />
-      <Line x1="9" y1="22" x2="15" y2="22" />
-    </Svg>
-  )
-}
-
-// https://github.com/Remix-Design/RemixIcon/blob/master/License
-export function BellIconSolid({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      viewBox="0 0 24 24"
-      width={size || 24}
-      height={size || 24}
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      style={style}>
-      <Path
-        d="M 11.642 2 H 12.442 A 8.6 8.55 0 0 1 21.042 10.55 V 18.1 A 1 1 0 0 1 20.042 19.1 H 4.042 A 1 1 0 0 1 3.042 18.1 V 10.55 A 8.6 8.55 0 0 1 11.642 2 Z"
-        fill="currentColor"
-      />
-      <Line x1="9" y1="22" x2="15" y2="22" />
-    </Svg>
-  )
-}
-
 export function CogIcon({
   style,
   size,
···
   )
 }
 
-export function CogIconSolid({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth: number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      width={size || 32}
-      height={size || 32}
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      style={style}>
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M 9.594 3.94 C 9.684 3.398 10.154 3 10.704 3 L 13.297 3 C 13.847 3 14.317 3.398 14.407 3.94 L 14.62 5.221 C 14.683 5.595 14.933 5.907 15.265 6.091 C 15.339 6.131 15.412 6.174 15.485 6.218 C 15.809 6.414 16.205 6.475 16.56 6.342 L 17.777 5.886 C 18.292 5.692 18.872 5.9 19.147 6.376 L 20.443 8.623 C 20.718 9.099 20.608 9.705 20.183 10.054 L 19.18 10.881 C 18.887 11.121 18.742 11.494 18.749 11.873 C 18.751 11.958 18.751 12.043 18.749 12.128 C 18.742 12.506 18.887 12.878 19.179 13.118 L 20.184 13.946 C 20.608 14.296 20.718 14.9 20.444 15.376 L 19.146 17.623 C 18.871 18.099 18.292 18.307 17.777 18.114 L 16.56 17.658 C 16.205 17.525 15.81 17.586 15.484 17.782 C 15.412 17.826 15.338 17.869 15.264 17.91 C 14.933 18.093 14.683 18.405 14.62 18.779 L 14.407 20.059 C 14.317 20.602 13.847 21 13.297 21 L 10.703 21 C 10.153 21 9.683 20.602 9.593 20.06 L 9.38 18.779 C 9.318 18.405 9.068 18.093 8.736 17.909 C 8.662 17.868 8.589 17.826 8.516 17.782 C 8.191 17.586 7.796 17.525 7.44 17.658 L 6.223 18.114 C 5.708 18.307 5.129 18.1 4.854 17.624 L 3.557 15.377 C 3.282 14.901 3.392 14.295 3.817 13.946 L 4.821 13.119 C 5.113 12.879 5.258 12.506 5.251 12.127 C 5.249 12.042 5.249 11.957 5.251 11.872 C 5.258 11.494 5.113 11.122 4.821 10.882 L 3.817 10.054 C 3.393 9.705 3.283 9.1 3.557 8.624 L 4.854 6.377 C 5.129 5.9 5.709 5.692 6.224 5.886 L 7.44 6.342 C 7.796 6.475 8.191 6.414 8.516 6.218 C 8.588 6.174 8.662 6.131 8.736 6.09 C 9.068 5.907 9.318 5.595 9.38 5.221 Z M 13.5 9.402 C 11.5 8.247 9 9.691 9 12 C 9 13.072 9.572 14.062 10.5 14.598 C 12.5 15.753 15 14.309 15 12 C 15 10.928 14.428 9.938 13.5 9.402 Z"
-        fill="currentColor"
-      />
-    </Svg>
-  )
-}
-
-// Copyright (c) 2020 Refactoring UI Inc.
-// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
-export function MoonIcon({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      width={size || 32}
-      height={size || 32}
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      style={style}>
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
-      />
-    </Svg>
-  )
-}
-
-// Copyright (c) 2020 Refactoring UI Inc.
-// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
-export function SunIcon({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      width={size || 32}
-      height={size || 32}
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      style={style}>
-      <Path
-        d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </Svg>
-  )
-}
-
-// Copyright (c) 2020 Refactoring UI Inc.
-// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
-export function UserIcon({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      width={size || 32}
-      height={size || 32}
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      style={style}>
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
-      />
-    </Svg>
-  )
-}
-
-export function UserIconSolid({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      width={size || 32}
-      height={size || 32}
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      style={style}>
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="currentColor"
-        d="M 15 9.75 C 15 12.059 12.5 13.503 10.5 12.348 C 9.572 11.812 9 10.822 9 9.75 C 9 7.441 11.5 5.997 13.5 7.152 C 14.428 7.688 15 8.678 15 9.75 Z"
-      />
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="currentColor"
-        d="M 17.982 18.725 C 16.565 16.849 14.35 15.748 12 15.75 C 9.65 15.748 7.435 16.849 6.018 18.725 M 17.981 18.725 C 16.335 20.193 14.206 21.003 12 21 C 9.794 21.003 7.664 20.193 6.018 18.725"
-      />
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M 17.981 18.725 C 23.158 14.12 21.409 5.639 14.833 3.458 C 8.257 1.277 1.786 7.033 3.185 13.818 C 3.576 15.716 4.57 17.437 6.018 18.725 M 17.981 18.725 C 16.335 20.193 14.206 21.003 12 21 C 9.794 21.003 7.664 20.193 6.018 18.725"
-      />
-    </Svg>
-  )
-}
-
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
 export function UserGroupIcon({
···
   )
 }
 
-export function RepostIcon({
-  style,
-  size = 24,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<TextStyle>
-  size?: string | number
-  strokeWidth: number
-}) {
-  return (
-    <Svg viewBox="0 0 24 24" width={size} height={size} style={style}>
-      <Path
-        stroke="currentColor"
-        strokeWidth={strokeWidth}
-        strokeLinejoin="round"
-        fill="none"
-        d="M 14.437 18.081 L 5.475 18.095 C 4.7 18.095 4.072 17.467 4.072 16.692 L 4.082 6.65 L 1.22 10.854 M 4.082 6.65 L 7.006 10.854 M 9.859 6.65 L 18.625 6.654 C 19.4 6.654 20.028 7.282 20.028 8.057 L 20.031 18.081 L 17.167 13.646 M 20.031 18.081 L 22.866 13.646"
-      />
-    </Svg>
-  )
-}
-
-// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-export function HeartIcon({
-  style,
-  size = 24,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<TextStyle>
-  size?: string | number
-  strokeWidth: number
-}) {
-  return (
-    <Svg viewBox="0 0 24 24" width={size} height={size} style={style}>
-      <Path
-        strokeWidth={strokeWidth}
-        stroke="currentColor"
-        fill="none"
-        d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z"
-      />
-    </Svg>
-  )
-}
-
-// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-export function HeartIconSolid({
-  style,
-  size = 24,
-}: {
-  style?: StyleProp<TextStyle>
-  size?: string | number
-}) {
-  return (
-    <Svg viewBox="0 0 24 24" width={size} height={size} style={style}>
-      <Path
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth={1}
-        d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z"
-      />
-    </Svg>
-  )
-}
-
-export function UpIcon({
-  style,
-  size,
-  strokeWidth = 1.3,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-  strokeWidth: number
-}) {
-  return (
-    <Svg
-      viewBox="0 0 14 14"
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Path
-        strokeWidth={strokeWidth}
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z"
-      />
-    </Svg>
-  )
-}
-
-export function UpIconSolid({
-  style,
-  size,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-}) {
-  return (
-    <Svg
-      viewBox="0 0 14 14"
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Path
-        strokeWidth={1.3}
-        stroke="currentColor"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z"
-      />
-    </Svg>
-  )
-}
-
-export function DownIcon({
-  style,
-  size,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-}) {
-  return (
-    <Svg
-      viewBox="0 0 14 14"
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Path
-        strokeWidth={1.3}
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z"
-      />
-    </Svg>
-  )
-}
-
-export function DownIconSolid({
-  style,
-  size,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-}) {
-  return (
-    <Svg
-      viewBox="0 0 14 14"
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Path
-        strokeWidth={1.3}
-        stroke="currentColor"
-        fill="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z"
-      />
-    </Svg>
-  )
-}
-
-// Copyright (c) 2020 Refactoring UI Inc.
-// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
-export function CommentBottomArrow({
-  style,
-  size,
-  strokeWidth = 1.3,
-}: {
-  style?: StyleProp<TextStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  let color = 'currentColor'
-  if (
-    style &&
-    typeof style === 'object' &&
-    'color' in style &&
-    typeof style.color === 'string'
-  ) {
-    color = style.color
-  }
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={strokeWidth || 2.5}
-      stroke={color}
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
-      />
-    </Svg>
-  )
-}
-
 export function SquareIcon({
   style,
   size,
···
   )
 }
 
-export function ComposeIcon({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<TextStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-      />
-    </Svg>
-  )
-}
-
 export function ComposeIcon2({
   style,
   size,
···
         x2="21"
         y2="3"
         strokeWidth={strokeWidth * 1.5}
-      />
-    </Svg>
-  )
-}
-
-export function SquarePlusIcon({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<TextStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      viewBox="0 0 24 24"
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Line
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        x1="12"
-        y1="5.5"
-        x2="12"
-        y2="18.5"
-        strokeWidth={strokeWidth * 1.5}
-      />
-      <Line
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        x1="5.5"
-        y1="12"
-        x2="18.5"
-        y2="12"
-        strokeWidth={strokeWidth * 1.5}
-      />
-      <Rect
-        strokeWidth={strokeWidth}
-        x="4"
-        y="4"
-        width="16"
-        height="16"
-        rx="4"
-        ry="4"
       />
     </Svg>
   )
···
     </Svg>
   )
 }
-
-export function ListIcon({
-  style,
-  size,
-  strokeWidth = 1.5,
-}: {
-  style?: StyleProp<TextStyle>
-  size?: string | number
-  strokeWidth?: number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={strokeWidth || 1.5}
-      stroke="currentColor"
-      width={size}
-      height={size}
-      style={style}>
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-      />
-    </Svg>
-  )
-}

src/view/com/notifications/Feed.tsx

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {cleanError} from '#/lib/strings/errors'
+import {s} from '#/lib/styles'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
 import {useUnreadNotificationsApi} from '#/state/queries/notifications/unread'
-import {s} from 'lib/styles'
-import {EmptyState} from '../util/EmptyState'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {List, ListRef} from '../util/List'
-import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
-import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
-import {CenteredView} from '../util/Views'
+import {EmptyState} from '#/view/com/util/EmptyState'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {List, ListRef} from '#/view/com/util/List'
+import {NotificationFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
+import {CenteredView} from '#/view/com/util/Views'
 import {FeedItem} from './FeedItem'
 import hairlineWidth = StyleSheet.hairlineWidth
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}

src/view/com/notifications/FeedItem.tsx

···
   ModerationOpts,
 } from '@atproto/api'
 import {AtUri} from '@atproto/api'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-  Props,
-} from '@fortawesome/react-native-fontawesome'
 import {msg, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
···
 import {FeedNotification} from '#/state/queries/notifications/feed'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {usePalette} from 'lib/hooks/usePalette'
-import {HeartIconSolid} from 'lib/icons'
 import {makeProfileLink} from 'lib/routes/links'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
···
 import {colors, s} from 'lib/styles'
 import {isWeb} from 'platform/detection'
 import {precacheProfile} from 'state/queries/profile'
+import {atoms as a, useTheme} from '#/alf'
+import {
+  ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon,
+  ChevronTop_Stroke2_Corner0_Rounded as ChevronUpIcon,
+} from '#/components/icons/Chevron'
+import {Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled} from '#/components/icons/Heart2'
+import {PersonPlus_Filled_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
+import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
 import {Link as NewLink} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {FeedSourceCard} from '../feeds/FeedSourceCard'
···
 import {Text} from '../util/text/Text'
 import {TimeElapsed} from '../util/TimeElapsed'
 import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar'
+
 import hairlineWidth = StyleSheet.hairlineWidth
 
 const MAX_AUTHORS = 5
···
   const queryClient = useQueryClient()
   const pal = usePalette('default')
   const {_} = useLingui()
+  const t = useTheme()
   const [isAuthorsExpanded, setAuthorsExpanded] = useState<boolean>(false)
   const itemHref = useMemo(() => {
     if (item.type === 'post-like' || item.type === 'repost') {
···
   }
 
   let action = ''
-  let icon: Props['icon'] | 'HeartIconSolid'
-  let iconStyle: Props['style'] = []
+  let icon = (
+    <HeartIconFilled
+      size="xl"
+      style={[
+        s.likeColor,
+        // {position: 'relative', top: -4}
+      ]}
+    />
+  )
   if (item.type === 'post-like') {
     action = _(msg`liked your post`)
-    icon = 'HeartIconSolid'
-    iconStyle = [
-      s.likeColor as FontAwesomeIconStyle,
-      {position: 'relative', top: -4},
-    ]
   } else if (item.type === 'repost') {
     action = _(msg`reposted your post`)
-    icon = 'retweet'
-    iconStyle = [s.green3 as FontAwesomeIconStyle]
+    icon = <RepostIcon size="xl" style={{color: t.palette.positive_600}} />
   } else if (item.type === 'follow') {
     action = _(msg`followed you`)
-    icon = 'user-plus'
-    iconStyle = [s.blue3 as FontAwesomeIconStyle]
+    icon = <PersonPlusIcon size="xl" style={{color: t.palette.primary_500}} />
   } else if (item.type === 'feedgen-like') {
     action = _(msg`liked your custom feed`)
-    icon = 'HeartIconSolid'
-    iconStyle = [
-      s.likeColor as FontAwesomeIconStyle,
-      {position: 'relative', top: -4},
-    ]
   } else {
     return null
   }
···
         item.type === 'repost'
       }
       onBeforePress={onBeforePress}>
-      <View style={styles.layoutIcon}>
+      <View style={[styles.layoutIcon, a.pr_sm]}>
         {/* TODO: Prevent conditional rendering and move toward composable
         notifications for clearer accessibility labeling */}
-        {icon === 'HeartIconSolid' ? (
-          <HeartIconSolid size={28} style={[styles.icon, ...iconStyle]} />
-        ) : (
-          <FontAwesomeIcon
-            icon={icon}
-            size={24}
-            style={[styles.icon, ...iconStyle]}
-          />
-        )}
+        {icon}
       </View>
       <View style={styles.layoutContent}>
         <ExpandListPressable
···
           accessibilityHint={_(
             msg`Collapses list of users for a given notification`,
           )}>
-          <FontAwesomeIcon
-            icon="angle-up"
-            size={18}
+          <ChevronUpIcon
+            size="md"
             style={[styles.expandedAuthorsCloseBtnIcon, pal.text]}
           />
           <Text type="sm-medium" style={pal.text}>
···
             +{authors.length - MAX_AUTHORS}
           </Text>
         ) : undefined}
-        <FontAwesomeIcon
-          icon="angle-down"
-          size={18}
+        <ChevronDownIcon
+          size="md"
           style={[styles.expandedAuthorsCloseBtnIcon, pal.textLight]}
         />
       </View>

src/view/com/util/LoadingPlaceholder.tsx

···
 } from 'react-native'
 
 import {usePalette} from 'lib/hooks/usePalette'
-import {HeartIconSolid} from 'lib/icons'
 import {s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
-import {useTheme as useTheme_NEW} from '#/alf'
+import {atoms as a, useTheme as useTheme_NEW} from '#/alf'
 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
-import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2'
+import {
+  Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
+  Heart2_Stroke2_Corner0_Rounded as HeartIconOutline,
+} from '#/components/icons/Heart2'
 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 import hairlineWidth = StyleSheet.hairlineWidth
 
···
   const pal = usePalette('default')
   return (
     <View style={[styles.notification, pal.view, style]}>
-      <View style={{paddingLeft: 30, paddingRight: 10}}>
-        <HeartIconSolid
-          style={{color: pal.colors.backgroundLight} as ViewStyle}
-          size={30}
+      <View style={[{width: 70}, a.align_end, a.pr_sm, a.pt_2xs]}>
+        <HeartIconFilled
+          size="xl"
+          style={{color: pal.colors.backgroundLight}}
         />
       </View>
       <View style={{flex: 1}}>
-        <View style={[s.flexRow, s.mb10]}>
+        <View style={[a.flex_row, s.mb10]}>
           <LoadingPlaceholder
             width={30}
             height={30}