Power Apps Button with Icon and Text

Power Apps Button with Icon and Text

User experience plays a critical role in the success of any Power Apps application. Well-designed buttons help users navigate applications efficiently, execute actions quickly, and improve overall usability.

One popular design approach is combining icons and text within a button. This provides visual cues while clearly communicating the purpose of the action.

In this article, we'll explore how to create Power Apps buttons with icons and text and implement modern UI practices.

Why Use Icons with Buttons?

Icons provide visual context that helps users understand actions instantly.

Benefits include:

• Better usability
• Faster navigation
• Improved accessibility
• Modern appearance
• Enhanced user engagement

Examples:

• Save
• Edit
• Delete
• Search
• Submit
• Refresh

Users often recognize icons faster than text alone.

Understanding the Requirement

Instead of displaying:

Submit

Use:

📤 Submit

Instead of displaying:

Save

Use:

💾 Save

This combination creates a cleaner and more intuitive user experience.

Solution Overview

• Power Apps Button Control
• Icons
• Labels
• Containers
• Power Fx

Workflow:

User Clicks Button → Icon Displayed → Action Triggered → Business Logic Runs → Result Displayed

Method 1: Use Button and Icon Controls

Insert:

• Button
• Icon

Place both controls inside a container.

Example:

Save Icon + Save Text

This approach provides flexibility in positioning and styling.

Method 2: Use Modern Controls

Power Apps Modern Controls provide built-in support for icons and text.

Benefits:

• Responsive design
• Consistent appearance
• Simplified development
• Better accessibility

Modern controls are recommended for new applications.

Step 1: Add an Icon

Navigate to:

Insert → Icons

Select:

• Save
• Edit
• Search
• Add
• Delete

Power Apps includes a large collection of built-in icons.

Step 2: Add Button Text

Insert a label or button.

Examples:

• Save
• Submit
• Approve
• Cancel

Combine text with the icon for better clarity.

Step 3: Add Power Fx Action

Button OnSelect:

Notify(
    "Record Saved Successfully",
    NotificationType.Success
)

When users click the button:

• Action executes
• Notification appears
• User receives feedback

Step 4: Style the Button

Recommended settings:

• Rounded corners
• Consistent colors
• Proper spacing
• Hover effects
• Accessible contrast

Modern styling improves application professionalism.

Real-World Example

Employee Request Application

Users submit requests through Power Apps.

Buttons include:

• 📤 Submit Request
• ✏️ Edit Request
• 🗑️ Delete Request
• 🔍 Search Records

Result:

Users immediately understand available actions.

Common Use Cases

Form Submission

Submit records quickly.

Approval Workflows

Approve or reject requests.

Navigation Menus

Move between screens.

Search Functions

Launch searches instantly.

Data Management

Create, edit, and delete records.

Best Practices

Use Meaningful Icons

Icons should match the action.

Keep Text Short

Avoid lengthy labels.

Maintain Consistency

Use the same icon style throughout the application.

Support Accessibility

Ensure sufficient color contrast.

Test Mobile Layouts

Validate responsiveness on different devices.

Avoid Overcrowding

Too many icons can reduce clarity.

Benefits

Improved User Experience

Users understand actions faster.

Better Visual Design

Applications appear modern and professional.

Faster Navigation

Icons provide instant recognition.

Increased Productivity

Users complete tasks more efficiently.

Consistent Branding

Supports standardized application design.

Conclusion

Creating Power Apps buttons with icons and text is a simple yet effective way to enhance application usability and visual appeal. By combining meaningful icons with clear labels, organizations can build intuitive user interfaces that improve user adoption and productivity.

Whether you're building forms, dashboards, approval systems, or enterprise applications, icon-enabled buttons provide a modern and professional experience for end users.