How to Use PowerIcons

Learn how to add beautiful, customizable icons to your Power Apps projects. Follow this step-by-step guide to unlock the full potential of 6,300+ icons.

Getting Started

1

Browse Icons

Scroll through the massive library of 6,300+ icons or use the search bar to find exactly what you need. Switch between Fluent, Bootstrap, and Lucide libraries using the dropdown.

2

Copy Icon

Choose how you want to copy the icon code:

Left Click: Copies complete YAML code with Power Apps image component structure

Right Click: Copies only the image data (SVG code) for the Image property

You'll see a confirmation with a colored checkmark: purple for full code, green for image data only.

3

Paste in Power Apps

Follow these steps in your Power Apps canvas:

  • Right-click where you want to place the icon
  • Select "Paste"
  • Important: When prompted, select "Paste code"
4

Use Your Icon

The icon appears in your app instantly, ready to use with all Power Apps properties available for further customization.

Customizing Icons

Change Colors

Match your app's branding. Works with all icon types.

Adjust Stroke Width

Control line thickness. Lucide icons only.

Rotate Icons

Adjust rotation for perfect fit. Works with all types.

Copy Modified

Click the icon again to copy your customized version.

Using External SVGs

Preview: Click-to-Select Elements

Import any SVG from anywhere and transform it into a Power Apps component with advanced customization options:

1

Open External SVG Dialog

Click the "External SVG" button in the top menu to open the import dialog where you can work with your own SVG files.

2

Paste Your SVG Code

Copy SVG code from any source (websites, design tools, etc.) and paste it into the text area. You'll see a live preview of your SVG immediately.

3

Analyze Colors

Click "Analyze Colors" to automatically detect all colors in your SVG. The system will identify every color used and show you exactly which elements contain each color.

4

Customize Colors

Use the color pickers that appear for each detected color to customize your SVG. Change any color to match your brand or design requirements.

5

Hide Unwanted Elements

Uncheck colors to hide specific parts of your SVG. This is perfect for removing backgrounds, shadows, or any elements you don't want in your final icon.

6

Convert & Copy

Click "Convert & Copy" to transform your customized SVG into Power Apps-ready YAML code. Then paste it directly into your Power Apps project.

7

Click-to-Select ElementsPreview

For surgical precision, click "Select Elements" to enter selection mode. Then click directly on individual SVG elements to mark them for removal. This preview feature provides element-level control beyond color-based operations.

Format Options

Image Only

Simple image component for decorative icons. Cleaner, smaller code.

Clickable

Adds invisible button overlay. Cursor changes to hand on hover.

Video Tutorial

Watch Dennis walk through PowerIcons step-by-step in this comprehensive video tutorial:

Need Help?

Have questions or feedback? Get in touch:

Ready to Get Started?

Jump back to the icon library and start building amazing Power Apps!