Merged main into live

Author: QuinnRadich

hub/apps/design/controls/animated-icon.md

@@ -2,7 +2,7 @@
 description: An AnimatedIcon is a control which plays animated images in response to user interaction and visual state changes.
 title: AnimatedIcon
 template: detail.hbs
-ms.date: 03/24/2022
+ms.date: 07/29/2024
 ms.topic: article
 ms.custom: 20H2
 ms.localizationpriority: medium
@@ -78,7 +78,7 @@ xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
 > - **Important APIs:** [AnimatedIcon class](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.animatedicon)
 
 > [!div class="nextstepaction"]
-> [Open the WinUI 3 Gallery app and see the AnimatedIcon in action](winui3gallery:/item/AnimatedIcon).
+> [Open the WinUI 3 Gallery app to see AnimatedIcon in action](winui3gallery:/item/AnimatedIcon)
 
 [!INCLUDE [winui-3-gallery](../../../includes/winui-3-gallery.md)]
 
@@ -236,5 +236,5 @@ private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
 
 ## Related articles
 
-- [Icons](/windows/uwp/design/style/icons)
-- [Animations in XAML](/windows/uwp/design/motion/xaml-animation)
+- [Icons in Windows apps](../style/icons.md)
+- [Motion for Windows apps](../motion/index.md)

hub/apps/design/signature-experiences/iconography.md

@@ -2,7 +2,7 @@
 description: Learn about app and system icons in Windows 11.
 title: Iconography in Windows 11
 ms.assetid: EC94D54F-4C24-4E16-B8E0-08F3916C00F0
-ms.date: 06/24/2021
+ms.date: 07/24/2024
 ms.topic: article
 keywords: windows 11, design, ui, uiux, icons, app icons, system icons, segoe fluent icons, segoe
 ms.localizationpriority: medium
@@ -14,19 +14,20 @@ Iconography is a set of visual images and symbols that help users understand and
 
 Windows 11 uses three types of icons: application, system, and file type. This article focuses on the first two.
 
+This article describes how the [Fluent Design language](https://fluent2.microsoft.design/) is applied to Windows apps. For more information, see [Fluent Design Iconography](https://fluent2.microsoft.design/iconography).
 ## Application icons
 
 ![An abstract application icon for a hypothetical maps app.](images/iconography_hero_1880.png)
 
 Application icons represent your app in the Windows shell. They're primarily used to open your application, but they also represent your app wherever it appears in the Windows shell.
 
-App icons should represent your app's core functionality through a metaphor. For more information about designing and constructing your app's icon, see [Iconography in Windows](../style/iconography/overview.md).
+App icons should represent your app's core functionality through a metaphor. For more information about designing and constructing your app's icon, see [App icons](../style/iconography/overview.md).
 
 ## System icons
 
 ![A shopping cart icon from Segoe Fluent Icons.](images/iconography_SystemIcons.svg)
 
-Windows 11 introduces a new system icon font, [Segoe Fluent Icons](..\downloads\index.md#fonts). This new font complements [geometry](geometry.md) in Windows 11.
+Use system icons inside your app UI for items like command bars, navigation, or status indicators. Windows 11 introduces a new system icon font, [Segoe Fluent Icons](../style/segoe-fluent-icons-font.md). This new font complements [geometry](geometry.md) in Windows 11.
 
 All glyphs in Segoe Fluent Icons are drawn in a monoline style. That means they're created through a single stroke of 1 epx.
 
@@ -36,15 +37,17 @@ Glyphs in Segoe Fluent Icons follow three aesthetic principles:
 - **Harmonious**: Glyphs are based on simple and geometric forms.
 - **Evolved**: Glyphs use modern metaphors that are easily understood.
 
-### Sizing
+For more information about using icons in your app UI, see [Icons in Windows apps](../style/icons.md).
+
+### Icon size
 
 ![A properly sized printer icon.](images/iconography_IconSizing.svg)
 
 Font metrics for Segoe Fluent Icons match how designers and developers are accustomed to working with SVG and bitmap icons.
 
 Each font glyph is designed so that the footprint of the icon area is a square em. An icon with a 16-epx font size is the equivalent of a 16x16-epx icon, to make sizing and positioning more predictable.
 
-### Anatomy
+### Modifiers
 
 You can visually construct system icon glyphs by combining a base icon with a modifier icon.
 
@@ -83,7 +86,7 @@ Understand the cultural connotations of symbols. Although iconography doesn't re
 
 ## Examples
 
-> [!TIP]
 > [!div class="nextstepaction"]
-> [Open the WinUI 3 Gallery app and see Iconography principles in action](winui3gallery:/item/Icons).
-> The **WinUI 3 Gallery** app includes interactive examples of most WinUI 3 controls, features, and functionality. Get the app from the [Microsoft Store](https://www.microsoft.com/store/productId/9P3JFPWWDZRC) or get the source code on [GitHub](https://github.com/microsoft/WinUI-Gallery)
+> [Open the WinUI 3 Gallery app and see Iconography principles in action](winui3gallery:/item/Iconography)
+
+[!INCLUDE [winui-3-gallery](../../../includes/winui-3-gallery.md)]

hub/apps/design/signature-experiences/motion.md

@@ -1,7 +1,7 @@
 ---
 description: An overview of where and how motion is used in Windows 11
 title: Motion in Windows 11
-ms.date: 07/15/2021
+ms.date: 07/24/2024
 ms.topic: article
 keywords: windows 11, design, ui, uiux, motion
 ms.localizationpriority: medium
@@ -112,7 +112,7 @@ _Click the image to see it animated._
 
 #### Animated Icon: Adds delight and reveals information through micro interactions
 
-Use [animated icons](../controls/animated-icon.md) to implement lightweight, vector based, icons and illustrations with motion using [Lottie](/windows/communitytoolkit/animations/lottie) animations.
+Use [animated icons](../controls/animated-icon.md) to implement lightweight, vector-based icons and illustrations with motion using [Lottie](/windows/communitytoolkit/animations/lottie) animations.
 
 Animated icons draw attention to specific entry points, provide feedback from state to state, and add delight to an interaction.
 

hub/apps/design/style/iconography/images/icon-abstract-path.png

@@ -1,24 +1,25 @@
 ---
-title: Iconography in Windows
+title: App icons
 description: Design and create an app icon for your Windows app. 
 keywords: windows 10, uwp
-design-contact: judysa
-ms.date: 10/29/2021
+ms.date: 07/23/2024
 ms.topic: article
 ms.localizationpriority: medium
 ---
 
-# Iconography in Windows
+# App icons
 
-App icons are the visual indicators we use to help users find and launch an application.
+App icons are the visual indicators we use to help users find and launch an application on Windows.
 
 It's the first impression of your app and we want to help make sure it's a great one. This article covers the best practices for Windows app icon design and implementation to provide the best experience in the Windows ecosystem.
 
+This article describes icons that represent your app in Windows and the Windows Store. To learn about icons that you use inside your app UI, see [Icons in Windows apps](../icons.md).
+
 ## Where do app icons appear?
 
-:::image type="content" source="images/win-11-icon-locations.png" alt-text="A diagram that shows an abstract image of the Windows 11 desktop.":::
+:::image type="content" source="images/win-11-icon-locations.png" alt-text="A diagram that shows an abstract image of the Windows 11 desktop and start menu.":::
 
-App icons appear in a variety of places in Windows
+App icons appear in a variety of places in Windows:
 
 :::row:::
     :::column:::
@@ -43,21 +44,18 @@ App icons appear in a variety of places in Windows
 
 ### Keep it simple
 
-**Create clean, straightforward, timeless designs** - Icons are quick visual cues that represent your app. simple, easy to understand designs help users recognize your app more quickly,
+**Create clean, straightforward, timeless designs** — Icons are quick visual cues that represent your app. Simple, easy to understand designs help users recognize your app more quickly.
 
 ### Keep it universal
 
-**Make it accessible, inviting, and easy to understand** - Avoid complex or overly abstract forms. An intricate shape may be appropriate in some cultures but not in others. Inclusive icons are better for everyone. We focus on human unifiers – our motivations, relationships, and capabilities. We design to extend human abilities and create a sense of belonging.
+**Make it accessible, inviting, and easy to understand** — Avoid complex or overly abstract forms. An intricate shape may be appropriate in some cultures but not in others. Inclusive icons are better for everyone. We focus on human unifiers – our motivations, relationships, and capabilities. We design to extend human abilities and create a sense of belonging.
 
 ### Do less, better
 
-**When every detail is thoughtfully crafted, delight happens** - The best apps offer beautiful design and reliable experiences. Your icon should illustrate app in a singular element using simple forms.
-
-### Design and create your app's icon
-
-Learn how to use [metaphor, shape, color, and shadow](app-icon-design.md) to design a beautiful and functional icon for your app.
-
-Create icons that look good [at any size, on any screen](app-icon-construction.md).
+**When every detail is thoughtfully crafted, delight happens** — The best apps offer beautiful design and reliable experiences. Your icon should illustrate your app in a singular element using simple forms.
 
-If your app supports Windows 10, your app's icons will be displayed in Live Tiles. [Learn more about additional considerations for icons on Windows 10](live-tile-icons.md)
+## Design and create your app's icon
 
+- [Design guidelines for Windows app icons](app-icon-design.md) — Learn how to use metaphor, shape, color, and shadow to design a beautiful and functional icon for your app.
+- [Construct the icon for your Windows app](app-icon-construction.md) — Create icons that look good at any size, on any screen.
+- [Construction guidelines for Windows 10 icons](live-tile-icons.md) — If your app runs on Windows 10, your app's icons will be displayed in Live Tiles. Learn more about additional considerations for icons on Windows 10.