The universal language of Emojis in Power Platform 😍

Emojis are so integrated into our lives, that they have become a universal language. Instead of "yes", "kyllä", or "ja" we can simply use 👍 - and everybody understands it. Magic! Let's explore how we can use Emojis in Power Platform.

Why? 🧐

Think about the apps you use every day. How would they look without any icons, just text buttons... Not great. Usage of icons signal common functions across apps, making it easy to find functions and adopt new user interfaces (UI). Consider these universal conversions:

As you can see, text buttons look quite dull in comparison while using icons greatly improves the look and feel of your applications. Space is also much more effectively used with icons.

There's also consideration for multilingual applications. Using icons there is no need for translation - they mean the same in all languages.

Icons vs Emojis

Cross-Platform Emojis

Emojis are platform-aware. This means the emojis differ from platfrom to platform. It is not an advantage or disadvantage, just something to be aware off. You can find a reference from Unicodes site.

As we're discussing icons and emojis in the context of Microsoft Power Platform it's a good idea to stop and think about the target audience of our solutions. Power Platform is generally used for inward facing apps for our own organization. Aren't Emojis too casual?

I would argue that, no, emojis are not too casual. Using them in business context lightens the mood and makes apps look less stuffy and rigid. A little color from Emojis is welcome in many cases. They're used in our free time, so why not at work as well?

There is naturally such a thing as too much. Use emojis where needed and where it really makes sense. Don't try to have a whole conversation with emojis - or use only emoji buttons when its meaning is universal.

Consider also where you want to add icons, since Emojis and SVGs differ slightly on where you can put them. Emojis are more supported.

Whether you choose Emojis or Icons, be consistent. Mix and match rarely results in cohesive and nice look.

Where to find them?

Open source

Be mindfull of licensing of Open Sourced resources. They may have restrictions for commercial usage.

Emojis are found from your computers keyboard, with a shortcut. On Windows it's 🪟 Win + V and 🌐 on MacOS.

For icons there are a lot of options. Regardless of the source, vector images with .svg extension. I recommend these two:

• FontAwesome
• Fluent 2

Font Awesome

Font Awesome has a Free and Pro versions. SVGs already include needed attribution. To find and download icons follow these instructions:

1. Navigate to Font Awesome.
2. Search for icon, we'll search for vehicle.
3. Select the first icon found.
4. Download the icon as SVG.

Fluent 2

Fluent 2 is used and created by Microsoft. Resources are MIT lisenced. To find and download icons follow these instructions:

1. Navigate to Fluent UI Icons repository in GitHub.

2. Navigate to assets folder.

3. Select the icon, then SVG folder.
   

4. In the folder there are many versions and sizing options for the same icon. Here we have sizes:

   • 12
   • 16
   • 20
   • ...

   And versions:

   • filled
   • regular
   • color

   For our purposes size doesn't matter, vector images scale infinitely. Just select the version you want, to open the file on GitHub.

5. Download the icon.
   

Emoji as SVG

Icons are image files only. For Emojis we can use them inline as text, but in many places we need an actual file to use. Creating one is easy:

1. Open your favorite code editor. Notepad on Windows can also be used.
2. Copy and paste this code snippet:

   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <text y="80" font-size="80">🙂</text>
   </svg>
3. Substitute the smiley with an Emoji of your choosing.
4. Save as .svg file.

Create a web resource

Using icons outside of Canvas Power Apps requires the icon or Emoji SVG to be uploaded as web resources.

1. Navigate to your solution in Power Apps Maker portal.
2. Select New -> More -> Web resource
3. Upload your icon or emoji SVG. All fields get automatically populated. Edit if needed.
4. Select Save.

Where to use icons or emojis

There are many opportunities to use icons in Power Platform!

🖥️ App icons

Power Apps Canvas

For Power Apps Canvas the app icon has to be in .png or .jpg. There is some image manipulation needed for this use case as well as icon / emoji lisencing considerations. This post will not go into that.

By default the Model-driven Power Apps' icon is very dull. Adding an icon can help the user differentiate apps from each other when there are multiple in an environment.

1. Open your Model-driven Power App in editor.
2. Select on Settings in the top menu.
3. In General settings select Use web resource as Icon.
4. Select Select icon and search and select your uploaded icon. Select Apply.
5. Close settings and select Save and publish.

Now your custom icon or emoji is you apps icon!

📁 Table icons

All out-of-the-box Dataverse tables have an icon - but the default for custom tables is... Let's say lacking.

Add icon for table

Best practice is to add the icon for the Dataverse table, although it is also possible to customize the icon in Model-driven Power App editor. On table scope all apps, that consume the table, will get the new icon.

1. Open your table in the solution.
2. Select Properties.
3. Select Advanced options.
4. In Choose table image select your icon web resource.
5. Select Save.

All Model-driven Power Apps will use the newly added icon.

✏️ Canvas app

Emoji

Adding Emojis in Canvas Power Apps is easiest inline.

1. Open your Canvas app in editor.
2. Select Insert and then Button.
3. For Text property write the Emoji.
   
4. Customize your button further

Icon

Other icons can be added as Media.

1. Open your Canvas app in editor.
2. Open the Media panel.
   
3. Select Add media and then Upload.
4. Select your icon file and select Open.
5. Select newly added image to add to canvas.

Now you have an icon added you your Canvas Power Apps. Note, that color or hover etc properties can't be modified in Power Apps Studio. There are ways around this - but that is a topic for another post.

✅ Choices

For choices Emojis can be used directly in the label. They're rendered in menus as well as views. SVGs can't be used with low-code - a PCF could work.

🔍 View names

In view names Emojis can be added by modifying the view name. SVGs can't be added at this time.

📄 Form names

As in views, Emojis can be added to the form name.

Conclusion

In conclusion, incorporating emojis and icons into your Power Platform solutions can significantly enhance user experience and interface design. They provide a universal language that transcends linguistic barriers, making your applications more intuitive and engaging.

While emojis add a touch of fun and familiarity, icons offer a clean and professional look. Remember to use them judiciously to maintain a balance between functionality and aesthetics. By following the guidelines and tips provided in this post, you can effectively leverage these visual elements to create more appealing and user-friendly Power Platform applications.

Happy designing! 🎨🚀