diff --git a/dev/AnimatedIcon/AnimatedIcon.cpp b/dev/AnimatedIcon/AnimatedIcon.cpp
index 247bae88c6..40e2b2087e 100644
--- a/dev/AnimatedIcon/AnimatedIcon.cpp
+++ b/dev/AnimatedIcon/AnimatedIcon.cpp
@@ -51,10 +51,8 @@ void AnimatedIcon::OnApplyTemplate()
         {
             winrt::ElementCompositionPreview::SetElementChildVisual(panel, visual.RootVisual());
         }
-        if (auto const source = Source())
-        {
-            TrySetForegroundProperty(source);
-        }
+
+        TrySetForegroundProperty();
     }
 }
 
@@ -515,17 +513,33 @@ void AnimatedIcon::SetRootPanelChildToFallbackIcon()
 
 void AnimatedIcon::OnForegroundPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyProperty& args)
 {
-    TrySetForegroundProperty(Source());
+    m_foregroundColorPropertyChangedRevoker.revoke();
+    if (auto const foregroundSolidColorBrush = Foreground().try_as<winrt::SolidColorBrush>())
+    {
+        m_foregroundColorPropertyChangedRevoker = RegisterPropertyChanged(foregroundSolidColorBrush, winrt::SolidColorBrush::ColorProperty(), { this, &AnimatedIcon::OnForegroundBrushColorPropertyChanged });
+        TrySetForegroundProperty(foregroundSolidColorBrush.Color());
+    }
+}
+
+void AnimatedIcon::OnForegroundBrushColorPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyProperty& args)
+{
+    TrySetForegroundProperty(sender.GetValue(args).as<winrt::Color>());
 }
 
 void AnimatedIcon::TrySetForegroundProperty(winrt::IAnimatedVisualSource2 const& source)
 {
-    if (source)
+    if (auto const foregroundSolidColorBrush = Foreground().try_as<winrt::SolidColorBrush>())
     {
-        if (auto const ForegroundSolidColorBrush = Foreground().try_as<winrt::SolidColorBrush>())
-        {
-            source.SetColorProperty(s_foregroundPropertyName, ForegroundSolidColorBrush.Color());
-        }
+        TrySetForegroundProperty(foregroundSolidColorBrush.Color(), source);
+    }
+}
+
+void AnimatedIcon::TrySetForegroundProperty(winrt::Color color, winrt::IAnimatedVisualSource2 const& source)
+{
+    auto const localSource = source ? source : Source();
+    if (localSource)
+    {
+        localSource.SetColorProperty(s_foregroundPropertyName, color);
     }
 }
 
diff --git a/dev/AnimatedIcon/AnimatedIcon.h b/dev/AnimatedIcon/AnimatedIcon.h
index b2303e2ee0..ff5a3ed86c 100644
--- a/dev/AnimatedIcon/AnimatedIcon.h
+++ b/dev/AnimatedIcon/AnimatedIcon.h
@@ -50,9 +50,11 @@ class AnimatedIcon :
     void TransitionAndUpdateStates(const winrt::hstring& fromState, const winrt::hstring& toState, float playbackMultiplier = 1.0f);
     void TransitionStates(const winrt::hstring& fromState, const winrt::hstring& toState, float playtbackMultiplier = 1.0f);
     void PlaySegment(float from, float to, float playbackMultiplier = 1.0f);
-    void TrySetForegroundProperty(winrt::IAnimatedVisualSource2 const& source);
+    void TrySetForegroundProperty(winrt::Color color, winrt::IAnimatedVisualSource2 const& source = nullptr);
+    void TrySetForegroundProperty(winrt::IAnimatedVisualSource2 const& source = nullptr);
     void OnAnimationCompleted(winrt::IInspectable const&, winrt::CompositionBatchCompletedEventArgs const&);
     void OnForegroundPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyProperty& args);
+    void OnForegroundBrushColorPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyProperty& args);
     void SetRootPanelChildToFallbackIcon();
 
     tracker_ref<winrt::IAnimatedVisual> m_animatedVisual{ this };
@@ -78,6 +80,7 @@ class AnimatedIcon :
     ScopedBatchCompleted_revoker m_batchCompletedRevoker{ };
     PropertyChanged_revoker m_ancestorStatePropertyChangedRevoker{};
     winrt::FrameworkElement::LayoutUpdated_revoker m_layoutUpdatedRevoker{};
+    PropertyChanged_revoker m_foregroundColorPropertyChangedRevoker{};
 
     winrt::AnimatedIconAnimationQueueBehavior m_queueBehavior{ winrt::AnimatedIconAnimationQueueBehavior::SpeedUpQueueOne };
 };
diff --git a/dev/AnimatedIcon/TestUI/AnimatedIconPage.xaml b/dev/AnimatedIcon/TestUI/AnimatedIconPage.xaml
index 962d7c933c..2b8747b696 100644
--- a/dev/AnimatedIcon/TestUI/AnimatedIconPage.xaml
+++ b/dev/AnimatedIcon/TestUI/AnimatedIconPage.xaml
@@ -15,8 +15,8 @@
     xmlns:myAnimatedvisuals="using:AnimatedVisuals"
     mc:Ignorable="d">
     <Page.Resources>
-        <SolidColorBrush x:Key="TestIconForeground" Color="#80808080"/>
-
+        <SolidColorBrush x:Key="TestIconForeground" Color="{StaticResource TestIconForegroundColor}"/>
+        <Color x:Key="TestIconForegroundColor">#80808080</Color>
         <Style TargetType="local:AnimatedIconHost">
             <Setter Property="Template">
                 <Setter.Value>
@@ -51,7 +51,7 @@
                                 </VisualStateGroup>
                             </VisualStateManager.VisualStateGroups>
                             <TextBlock Text="{TemplateBinding Title}"/>
-                            <ContentPresenter Height="200" Width="200" x:Name="IconPresenter" Foreground="{TemplateBinding Foreground}">
+                            <ContentPresenter Height="200" Width="200" x:Name="IconPresenter">
                                 <Border x:Name="Icon" controls:AnimatedIcon.State="Normal"/>
                             </ContentPresenter>
                             <TextBlock x:Name="StateTextBlock" HorizontalAlignment="Center"/>
@@ -120,7 +120,7 @@
                             </VisualStateManager.VisualStateGroups>
                             <CheckBox HorizontalAlignment="Right" IsChecked="{TemplateBinding IsChecked}" IsEnabled="False"/>
                             <TextBlock Text="{TemplateBinding Title}"/>
-                            <ContentPresenter Height="200" Width="200" x:Name="IconPresenter" Foreground="{TemplateBinding Foreground}">
+                            <ContentPresenter Height="200" Width="200" x:Name="IconPresenter">
                                 <Border x:Name="Icon" controls:AnimatedIcon.State="NormalOff"/>
                             </ContentPresenter>
                             <TextBlock x:Name="StateTextBlock" HorizontalAlignment="Center"/>
@@ -132,12 +132,14 @@
         </Style>
         
         <local:DoubleToStringConverter x:Key="DoubleToStringConverter"/>
+        <local:ColorToSolidColorBrushConverter x:Key="ColorToSolidColorBrushConverter"/>
         
     </Page.Resources>
 
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12">
         <Grid.Resources>
             <local:DoubleToStringConverter x:Key="DoubleToStringConverter"/>
+            <local:ColorToSolidColorBrushConverter x:Key="ColorToSolidColorBrushConverter"/>
         </Grid.Resources>
         <Grid>
             <Grid.RowDefinitions>
@@ -145,17 +147,32 @@
                 <RowDefinition Height="auto"/>
                 <RowDefinition Height="auto"/>
                 <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
             <TextBlock HorizontalAlignment="Center" Text="Animation Duration Multiplier" Grid.Row="0"/>
             <Slider HorizontalAlignment="Center" Minimum="0.1" Maximum="5.0" StepFrequency="0.1" Value="1.0" ValueChanged="Slider_ValueChanged" Width="150" Grid.Row="1"/>
             <TextBlock HorizontalAlignment="Center" Text="Speed Up behavior Multiplier" Grid.Row="2"/>
             <Slider HorizontalAlignment="Center" Minimum="1.0" Maximum="15.0" StepFrequency="0.1" Value="7.0" ValueChanged="SpeedUpSlider_ValueChanged" Width="150" Grid.Row="3"/>
-            <ScrollViewer Grid.Row="4">
+            <TextBlock HorizontalAlignment="Center" Text="Foreground Color" Grid.Row="4"/>
+            <Button HorizontalAlignment="Center" Grid.Row="5">
+                <Rectangle Height="100" Width="100">
+                    <Rectangle.Fill>
+                        <SolidColorBrush Color="{Binding ElementName=ForegoundColorPicker, Path=Color}"/>
+                    </Rectangle.Fill>
+                </Rectangle>
+                <Button.Flyout>
+                    <Flyout>
+                        <controls:ColorPicker x:Name="ForegoundColorPicker"  Color="{StaticResource TestIconForegroundColor}"/>
+                    </Flyout>
+                </Button.Flyout>
+            </Button>
+            <ScrollViewer Grid.Row="6">
                 <StackPanel>
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIcon_Cut" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="DropDownIcon_Cut" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -173,7 +190,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIcon_Queue" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="DropDownIcon_Queue" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -191,7 +208,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIcon_SpeedUpQueue" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="DropDownIcon_SpeedUpQueue" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -212,7 +229,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIconNavView_Cut" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="DropDownIconNavView_Cut" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -230,7 +247,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIconNavView_Queue" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="DropDownIconNavView_Queue" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -248,7 +265,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIconNavView_SpeedUpQueue" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="DropDownIconNavView_SpeedUpQueue" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -269,7 +286,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SideChevron_Cut" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="SideChevron_Cut" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -287,7 +304,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SideChevron_Queue" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="SideChevron_Queue" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -305,7 +322,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SideChevron_SpeedUpQueue" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="SideChevron_SpeedUpQueue" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -326,7 +343,7 @@
                     
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="HamburgerIcon_Cut" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="HamburgerIcon_Cut" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -341,7 +358,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="HamburgerIcon_Queue" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="HamburgerIcon_Queue" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -356,7 +373,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="HamburgerIcon_SpeedUpQueue" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="HamburgerIcon_SpeedUpQueue" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -374,7 +391,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SettingsIcon_Cut" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SettingsIcon_Cut" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -389,7 +406,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SettingsIcon_Queue" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SettingsIcon_Queue" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -404,7 +421,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SettingsIcon_SpeedUpQueue" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SettingsIcon_SpeedUpQueue" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -422,7 +439,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="BackIcon_Cut" Title="AnimatedBackVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="BackIcon_Cut" Title="AnimatedBackVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -439,7 +456,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="BackIcon_Queue" Title="AnimatedBackVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="BackIcon_Queue" Title="AnimatedBackVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -456,7 +473,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="BackIcon_SpeedUpQueue" Title="AnimatedBackVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="BackIcon_SpeedUpQueue" Title="AnimatedBackVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -476,7 +493,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SearchIcon_Cut" Title="AnimatedFindVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SearchIcon_Cut" Title="AnimatedFindVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -491,7 +508,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SearchIcon_Queue" Title="AnimatedFindVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SearchIcon_Queue" Title="AnimatedFindVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -506,7 +523,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}"  x:Name="SearchIcon_SpeedUpQueue" Title="AnimatedFindVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SearchIcon_SpeedUpQueue" Title="AnimatedFindVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
diff --git a/dev/AnimatedIcon/TestUI/AnimatedIcon_TestUI.projitems b/dev/AnimatedIcon/TestUI/AnimatedIcon_TestUI.projitems
index 8011a3996b..47125870a6 100644
--- a/dev/AnimatedIcon/TestUI/AnimatedIcon_TestUI.projitems
+++ b/dev/AnimatedIcon/TestUI/AnimatedIcon_TestUI.projitems
@@ -21,6 +21,7 @@
       <DependentUpon>AnimatedIconPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)BrightnessSun.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)ColorToSolidColorBrushConverter.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)DoubleToStringConverter.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)MockIRichAnimatedIconSource.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)ToggleAnimatedIconHost.cs" />
diff --git a/dev/AnimatedIcon/TestUI/ColorToSolidColorBrushConverter.cs b/dev/AnimatedIcon/TestUI/ColorToSolidColorBrushConverter.cs
new file mode 100644
index 0000000000..8250b441c6
--- /dev/null
+++ b/dev/AnimatedIcon/TestUI/ColorToSolidColorBrushConverter.cs
@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using Windows.UI;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Media;
+
+namespace MUXControlsTestApp
+{
+    class ColorToSolidColorBrushConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            return new SolidColorBrush((Color)value);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            return ((SolidColorBrush)value).Color;
+        }
+    }
+}