diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs
index ab4bfbb092..39972dd8ec 100644
--- a/examples/ui/ui.rs
+++ b/examples/ui/ui.rs
@@ -1,11 +1,13 @@
 //! This example illustrates the various features of Bevy UI.
 
+use std::f32::consts::PI;
+
 use bevy::{
     a11y::{
         accesskit::{NodeBuilder, Role},
         AccessibilityNode,
     },
-    color::palettes::basic::LIME,
+    color::palettes::{basic::LIME, css::DARK_GRAY},
     input::mouse::{MouseScrollUnit, MouseWheel},
     picking::focus::HoverMap,
     prelude::*,
@@ -157,28 +159,39 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 });
 
             parent
-                .spawn((
-                    Node {
-                        width: Val::Px(200.0),
-                        height: Val::Px(200.0),
-                        position_type: PositionType::Absolute,
-                        left: Val::Px(210.),
-                        bottom: Val::Px(10.),
-                        border: UiRect::all(Val::Px(20.)),
-                        ..default()
-                    },
-                    BorderColor(LIME.into()),
-                    BackgroundColor(Color::srgb(0.4, 0.4, 1.)),
-                ))
+                .spawn(Node {
+                    left: Val::Px(210.),
+                    bottom: Val::Px(10.),
+                    position_type: PositionType::Absolute,
+                    ..default()
+                })
                 .with_children(|parent| {
-                    parent.spawn((
-                        Node {
-                            width: Val::Percent(100.0),
-                            height: Val::Percent(100.0),
-                            ..default()
-                        },
-                        BackgroundColor(Color::srgb(0.8, 0.8, 1.)),
-                    ));
+                    parent
+                        .spawn((
+                            Node {
+                                width: Val::Px(200.0),
+                                height: Val::Px(200.0),
+                                border: UiRect::all(Val::Px(20.)),
+                                flex_direction: FlexDirection::Column,
+                                justify_content: JustifyContent::Center,
+                                ..default()
+                            },
+                            BorderColor(LIME.into()),
+                            BackgroundColor(Color::srgb(0.8, 0.8, 1.)),
+                        ))
+                        .with_children(|parent| {
+                            parent.spawn((
+                                UiImage::new(asset_server.load("branding/bevy_logo_light.png")),
+                                // Uses the transform to rotate the logo image by 45 degrees
+                                Transform::from_rotation(Quat::from_rotation_z(0.25 * PI)),
+                                BorderRadius::all(Val::Px(10.)),
+                                Outline {
+                                    width: Val::Px(2.),
+                                    offset: Val::Px(4.),
+                                    color: DARK_GRAY.into(),
+                                },
+                            ));
+                        });
                 });
 
             let shadow = BoxShadow {
@@ -186,7 +199,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 blur_radius: Val::Px(2.),
                 x_offset: Val::Px(10.),
                 y_offset: Val::Px(10.),
-                ..Default::default()
+                ..default()
             };
 
             // render order test: reddest in the back, whitest in the front (flex center)
@@ -302,6 +315,38 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             ));
                         });
                 });
+
+            // four bevy icons demonstrating image flipping
+            parent
+                .spawn(Node {
+                    width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
+                    position_type: PositionType::Absolute,
+                    justify_content: JustifyContent::Center,
+                    align_items: AlignItems::FlexEnd,
+                    column_gap: Val::Px(10.),
+                    padding: UiRect::all(Val::Px(10.)),
+                    ..default()
+                })
+                .with_children(|parent| {
+                    for (flip_x, flip_y) in
+                        [(false, false), (false, true), (true, true), (true, false)]
+                    {
+                        parent.spawn((
+                            Node {
+                                // The height will be chosen automatically to preserve the image's aspect ratio
+                                width: Val::Px(75.),
+                                ..default()
+                            },
+                            UiImage {
+                                image: asset_server.load("branding/icon.png"),
+                                flip_x,
+                                flip_y,
+                                ..default()
+                            },
+                        ));
+                    }
+                });
         });
 }