Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Pages
    • Take a guided tour
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • GCC, GCCH, DoD - Federal App Makers (FAM)
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Community Engagement
    • Community Calls Conversations
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Office UI Fabric Icon Generator

    Office UI Fabric Icon Generator

    11-11-2019 14:38 PM - last edited 03-18-2022 06:19 AM

    R3dKap
    Community Champion
    36092 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    Office UI Fabric Icon Generator

    ‎11-11-2019 02:38 PM

    [13-mar-2022] Update v2.0

    • Added latest official icons -> now 2254 icons available!
    • Application direct download below (instead of ZIPped component MSAPP file)

     

    OfficeUIFabricIconGenerator.png

     

    This application will allow you to generate the SVG code for any of the official Office UI Fabric Icons library. You will then be able to use that SVG code as the Image property of an Image control in your application.

    All details and important notes about how to use the component can be found here: OfficeUIFabricIconGenerator.

    I hope you will enjoy this component and that you will find it usefull. If it does, please consider giving it a thumbs up.

    Emmanuel (@R3dKap)

     

    INSTALLATION instructions

    • Download the ZIP file below
    • Go to make.powerapps.com on your tenant
    • Import the application
    • Play the app, choose your icon, get the icon code and paste it in an image control in the app your are developing
    • DO NOT IMPORT the component itself to the app your are developing as it holds thousands of icon SVG data!
    OfficeUIFabricIconGeneratorApp.zip
    Labels:
    • Labels:
    • Components
    Message 1 of 43
    36,092 Views
    80 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-13-2019 06:19 AM

    Just so you guys/girls know, you can of enter in the Icon color text input box a color name (like "red" or "yellow"), or a value like "rgb(rr,gg,bb,aa)" or "#rrggbbaa" (with the alpha value). All these work as well... 😉

    Message 2 of 43
    32,212 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-19-2019 02:41 PM

    Hi all,

    Just updated the component to v1.1 with the following new features:

    • Added icons count right next to the search box
    • Added icon names below icons
    • Fixed number of icon columns showed when resizing component
    • Added icon rotation
    • Added icon color hint
    • Replace icons scroll bar with paging buttons
    • Fixed larger icons width

    Hope you'll enjoy all these new features.

    Emmanuel (@R3dKap)

    Message 3 of 43
    31,942 Views
    3 Kudos
    Reply
    luuminhvuong93
    luuminhvuong93 Post Patron
    Post Patron
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-19-2019 11:45 PM

    Such a great work...hope this one gets updated regularly,

    Normally I go to flaticon or user powerpoint icon to save as SVG and then open them in wordpad ,and then copy to Powerapps...

    this saves lots of time !

    Message 4 of 43
    31,902 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    In response to luuminhvuong93
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-20-2019 05:17 AM

    Gald it helps @luuminhvuong93. About the regular update, I asked the team managing the list of icons if they could keep me informed of any modifications but I haven't had any feedback yet.

    Message 5 of 43
    31,885 Views
    0 Kudos
    Reply
    NewcombR
    NewcombR Advocate IV
    Advocate IV
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-21-2019 05:09 AM

    Do the icons have a transparent background fill?

    Message 6 of 43
    31,821 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    In response to NewcombR
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-21-2019 07:59 AM

    Hi @NewcombR,

    The background color of the icon can be defined throught the Fill property of the image control.

    Emmanuel

    Message 7 of 43
    31,804 Views
    2 Kudos
    Reply
    TxH
    TxH Advocate IV
    Advocate IV
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-23-2019 09:06 AM

    Thanks for sharing your great component - it helps a lot. 

    Message 8 of 43
    31,725 Views
    1 Kudo
    Reply
    kriggo15
    kriggo15 Responsive Resident
    Responsive Resident
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎12-02-2019 11:50 AM

    I really like this component. I'm still playing around with it and made a few customizations for adding my company's color palette.

     

    However, I'm running into an issue when I publish and share the app. When Editing the app, everything works well. When playing the app, we all get an error that we need to initialize the component. I've tried publishing with Initialize set to both true and false, added a button to set OfficeUIFabricIconGenerator.Initialize=true, and have set the AppStart OnStart and Screen OnVisible properties to OfficeUIFabricIconGenerator.Initialize=true. None of these seem to work.

     

    Icon Gen.jpg

    Message 9 of 43
    31,380 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    In response to kriggo15
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎12-03-2019 02:46 AM

    Hi @kriggo15,

    The component is not supposed to be part of your application once you decide to publish and share it. It should stay in your app only for design purposes. That's why I recommend to remove it once your publish your app. Then, if your need to update your app, just re-insert the component on an extra screen and use it. And then, again, remove it when your publish and share.

    Removing it before publishing your app also allows it to be lighter (since the component holds more than 1,800 svg data for all the icons).

    I'll check it out though to see if I can do something to fix this issue if you absolutely want to keep it in your app.

    Message 10 of 43
    31,355 Views
    0 Kudos
    Reply
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Pages
    • Power Automate
    • Power Virtual Agents

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2023 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks
    California Consumer Privacy Act (CCPA) Opt-Out Icon Your California Privacy Choices