How to Use PowerIcons

A step-by-step guide to adding beautiful icons to your PowerApps projects

Getting Started

  1. Browse Icons: Scroll through the icon library on the main page or use the search bar to find the icon you need.
  2. Copy Icon: Click on any icon to automatically copy its YAML code to your clipboard.
  3. Paste in PowerApps:
    • Go to your PowerApps canvas
    • Right-click where you want to place the icon
    • Select "Paste"
    • Important: When prompted, select "Paste code"
  4. Use Your Icon: The icon will appear in your app, ready to use with all PowerApps properties available.

Customizing Icons

PowerIcons lets you customize icons before copying them to PowerApps:

  1. Change Colors: Use the color picker to customize the icon color.
  2. Adjust Stroke Width: For line icons, you can adjust the thickness of lines.
  3. Rotate: Adjust the rotation of icons as needed.
  4. Copy Modified Icon: Click the icon again to copy the customized version.

Using External SVGs

Import your own SVG icons into PowerApps:

  1. Click "External SVG" in the top menu.
  2. Paste SVG Code: Copy SVG code from any source and paste it into the text area.
  3. Preview: See a live preview of your SVG.
  4. Customize Colors (Optional):
    • Click "Analyze SVG Colors" to detect colors
    • Use the color pickers to change any of the detected colors
  5. Convert & Copy: Click the button to convert the SVG to PowerApps-friendly YAML.
  6. Paste in PowerApps using the same method as above (remember to select "Paste code").

Image-Only & Clickable Dropdown

The "Image Only" dropdown in the toolbar affects how icons are copied:

  • Image Only: Copies just the basic image component without additional properties (smaller code)
  • Clickable: Wraps the icon in a container with an invisible button, which makes the cursor change to a hand icon when hovering over it in PowerApps, giving the illusion that it's clickable

This feature helps you control how users will interact with your icons in PowerApps.

Tips & Tricks

  • Use the search bar to quickly find icons by name or category
  • Customize colors to match your app's branding
  • The copied code creates an image control in PowerApps, which you can resize and style like any other control
  • For complex SVGs with multiple colors, use the External SVG tool to analyze and customize each color

Video Tutorial

Watch this video for a visual walkthrough of PowerIcons:

Quick Navigation

Need Help?

Have questions or feedback? Reach out to me directly.

Connect on X (Twitter)