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
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.
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.
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"
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
Import any SVG from anywhere and transform it into a Power Apps component with advanced customization options:
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.
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.
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.
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.
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.
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.
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: