🔹 Using Icons and Images in Power Apps – A Complete Guide

📌 Introduction

Icons and images play a crucial role in making a Power Apps application visually appealing, user-friendly, and easy to navigate. Power Apps allows you to use built-in icons, upload images, and dynamically fetch images from data sources.

✅ Why Use Icons & Images?

🎨 Enhances UI/UX with visual elements.
🚀 Improves navigation with intuitive icons.
🔄 Dynamically updates images from databases or APIs.

🔹 Step 1: Adding Built-in Icons

Power Apps provides a library of built-in icons like search, delete, edit, and more.

✅ Adding an Icon

1️⃣ Go to Insert → Select Icons
2️⃣ Choose an icon (e.g., Search, Edit, Delete, Home)
3️⃣ Resize and position the icon as needed

✅ Customizing Icon Properties

Change Color

Icon1.Color = RGBA(0, 122, 255, 1) // Blue Color

Change Size

Icon1.Width = 50
Icon1.Height = 50

Change Visibility

Icon1.Visible = User().Email = "admin@company.com"

📌 This makes the icon visible only for admins!

🔹 Step 2: Adding Images to Your App

✅ Uploading an Image

1️⃣ Click Insert → Select Image
2️⃣ In the Image Property, click Add Image File
3️⃣ Select an image from your computer

📌 Now, the image appears in your app!

✅ Setting an Image Dynamically from a URL

If images are stored online, use the Image property:

Image1.Image = "https://www.example.com/myimage.png"

📌 Now, the image will load from the web!

🔹 Step 3: Using Images from a Data Source

✅ Example: Displaying a User’s Profile Picture from SharePoint or Dataverse
1️⃣ Connect to a data source (e.g., SharePoint, Dataverse, SQL Server).
2️⃣ Bind the image control to the image field in your data source:

Image1.Image = LookUp(UserProfileTable, Email = User().Email).ProfilePicture

📌 This fetches the user’s profile picture dynamically!

✅ Example: Showing Product Images in a Gallery
1️⃣ Add a Gallery → Select a Data Source with images.
2️⃣ Insert an Image Control inside the Gallery.
3️⃣ Set the Image property to:

ThisItem.ProductImage

📌 Now, each product displays its own image!

🔹 Step 4: Using Icons for Navigation

✅ Example: Adding a Home Button
1️⃣ Insert a Home Icon
2️⃣ Set the OnSelect property:

Navigate(HomeScreen, ScreenTransition.Fade)

📌 Now, clicking the icon returns to the Home Screen!

✅ Example: Adding a Delete Button with Confirmation
1️⃣ Insert a Trash Icon
2️⃣ Set the OnSelect property:

If(
   Confirm("Are you sure you want to delete this item?"),
   Remove(DataSourceName, ThisItem)
)

📌 Now, clicking the icon deletes an item after confirmation!

🔹 Step 5: Displaying Images from OneDrive or SharePoint

✅ Example: Displaying an Image from OneDrive
1️⃣ Store images in OneDrive
2️⃣ Get the image URL and store it in a database
3️⃣ Set the Image property:

Image1.Image = "https://onedrive.live.com/embed?resid=" & ThisItem.ImageURL

📌 Now, the image loads from OneDrive!

✅ Example: Fetching an Image from SharePoint
1️⃣ Store images in a SharePoint Library
2️⃣ Use a Gallery and bind the image field:

Image1.Image = ThisItem.FileLink

📌 Now, SharePoint images are dynamically displayed!

🔹 Step 6: Using Conditional Formatting on Icons & Images

✅ Example: Changing Icon Color Based on Status

If a task is complete, show a green check; otherwise, show red:

Icon1.Color = If(ThisItem.Status = "Complete", Green, Red)

📌 Now, icons dynamically change color based on the task status!

✅ Example: Displaying Different Images Based on Conditions

If(
   ThisItem.Type = "Admin", 
   "https://example.com/admin.png", 
   "https://example.com/user.png"
)

📌 Now, different images are shown for admin and regular users!

🔹 Step 7: Optimizing Performance When Using Images

✅ Use Small Image Files

Upload compressed images to prevent slow loading.

✅ Use Cached Images

Store frequently used images in Power Apps Media Library.

✅ Lazy Load Images

Load images only when needed to improve app speed.

If(Gallery1.Selected, Image1.Visible = true, false)

📌 This prevents unnecessary image loading!

🔹 Conclusion

Using icons and images in Power Apps helps in improving the UI, navigation, and user experience.

💡 Key Takeaways:
✅ Use built-in icons for navigation and actions.
✅ Upload custom images or fetch them from data sources.
✅ Bind images dynamically to galleries and lists.
✅ Implement conditional formatting for dynamic UI.
✅ Optimize performance by caching and lazy loading images.

Now, you’re ready to enhance your Power Apps with icons and images!

Using Icons and Images in Apps