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
    • Re: Office UI Fabric Icon Generator

    Re: Office UI Fabric Icon Generator

    05-07-2020 18:57 PM

    DavesTechTips
    MVP
    1503 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,131 Views
    80 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »
    AKB_2K
    AKB_2K Resolver I
    Resolver I
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎05-06-2020 04:18 PM

    Good stuff

    Message 21 of 43
    1,521 Views
    0 Kudos
    Reply
    DavesTechTips
    DavesTechTips
    MVP
    In response to AKB_2K
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎05-07-2020 06:57 PM

    Absolutely top stuff @R3dKap, thank you, it works great!

     

    One note, the current zip file in the post doesn't want to import for some reason. I tried to download it again, but the same results. The msapp I grabbed from Github works great though.

     

    image.png

    Message 22 of 43
    1,503 Views
    1 Kudo
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    In response to DavesTechTips
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎05-11-2020 03:31 AM

    Hi @DavesTechTips, glad you like it! 😊

    About the ZIP file, it's because the ZIP file contains the MSAPP file. You have to unzip it yourself and then import the MSAPP file as a new component. I had a problem the day I published the component: I couldn't publish the MSAPP file directly with the post. That's why I packaged it in a ZIP file. But I'll try again to put the MSAPP file directly in the post again...

    Message 23 of 43
    1,491 Views
    0 Kudos
    Reply
    schuess3
    schuess3 Kudo Kingpin
    Kudo Kingpin
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎05-15-2020 08:26 AM

    Hey @R3dKap ,

     

    Is there a way to dynamically change colors of the icons in the App like with the OOTB icons? Have you heard or seen anyone doing that? To me it seems like the big reason to push for more OOTB icons. 

     

    BTW.. Your Component is awesome !

     

    Thanks

    Matt

    • Icons
    Message 24 of 43
    1,468 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    In response to schuess3
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎05-18-2020 12:34 AM

    Hi @schuess3,

    Thanks... 😊

    Yes, of course it's possible and, in fact, it's pretty easy. Have a close look at the SVG code you paste in your image control and you'll see a fill property for the icon:

    Image 2.png

    Between the 2 quotes, just insert a piece of code to define your icon's color:

    Image 3.png

    The only important thing to know is that the color must be a string in the HTML format: #rrggbbaa. As you can see, the last two letters "aa" indicate that you can even set the alpha component of the color, meaning you can set a transparency value.

    Enjoy!

    Message 25 of 43
    1,461 Views
    1 Kudo
    Reply
    Tolo
    Tolo
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-22-2020 03:13 PM

    Hi,

     

    Really very good work.

    Thanks a lot.

     

    Message 26 of 43
    1,422 Views
    1 Kudo
    Reply
    Aniruddha
    Aniruddha Advocate II
    Advocate II
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎07-16-2020 07:50 AM

    Hi,

     

    It is a fantastic app! Till last week the was working fine but now only one icon is visible. Did anything have changed?

    Aniruddha_0-1594911092748.png

     

    Message 27 of 43
    1,361 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    In response to Aniruddha
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎07-16-2020 08:14 AM

    Hi @Aniruddha,

    Thanks... You're absolutely right! I just tested it on my side and indeed only one icon shows up.

    I'm debugging this right now... I'll let you know when it's fixed...

    Message 28 of 43
    1,354 Views
    1 Kudo
    Reply
    max81
    max81 Impactful Individual
    Impactful Individual
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎10-08-2020 12:22 AM

    @R3dKap : will there be an update with the new Power Platform logos? 😬

     

    How ever: I still love it and use it! 🙂 💐

    Message 29 of 43
    1,235 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    In response to max81
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎10-08-2020 12:43 PM

    Following your reply I went to the official UI Fabric icons site and noticed that there were indeed many new icons. I'll add them to my component in the coming weeks. I also plan to make a version 2 of the component where not only will it generate the SVG for an icon but also will allow one to build a set of icons for an app and generate the code to declare these icons inside the OnStart event of the app. This technique will make it more easy to use the icons inside one's app...

    Just a bit more patience... 😊

    Message 30 of 43
    1,228 Views
    2 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