diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx index fcd9e0954..a6122059b 100644 --- a/ui/component/common/icon-custom.jsx +++ b/ui/component/common/icon-custom.jsx @@ -201,6 +201,26 @@ export const icons = { [ICONS.SUBSCRIBE]: buildIcon( ), + [ICONS.SUBSCRIBED]: (props: IconProps) => { + const { size = 24, color = 'currentColor', ...otherProps } = props; + return ( + + + + ); + }, + [ICONS.UNSUBSCRIBE]: buildIcon( ), diff --git a/ui/component/subscribeButton/view.jsx b/ui/component/subscribeButton/view.jsx index b39cc902b..82b898f73 100644 --- a/ui/component/subscribeButton/view.jsx +++ b/ui/component/subscribeButton/view.jsx @@ -89,7 +89,7 @@ export default function SubscribeButton(props: Props) { ref={buttonRef} iconColor="red" largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel} - icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE} + icon={unfollowOverride ? ICONS.UNSUBSCRIBE : isSubscribed ? ICONS.SUBSCRIBED : ICONS.SUBSCRIBE} button={'alt'} requiresAuth={IS_WEB} label={label} diff --git a/ui/constants/icons.js b/ui/constants/icons.js index 6734cde59..e803a3dac 100644 --- a/ui/constants/icons.js +++ b/ui/constants/icons.js @@ -35,6 +35,7 @@ export const COMPLETE = 'Check'; export const COMPLETED = 'CheckCircle'; export const NOT_COMPLETED = 'Circle'; export const SUBSCRIBE = 'Heart'; +export const SUBSCRIBED = 'HeartSolid'; export const UNSUBSCRIBE = 'BrokenHeart'; export const BELL = 'Bell'; export const BELL_ON = 'BellOn';