How to Create Icons for Custom Entities in Dynamics 365 CE: A Comprehensive Guide

Enhance your Dynamics 365 Customer Engagement system by adding your own icons to custom entities to help users with visual navigation. We walk through how to create and manage entity icons in this blog.

In the world of Dynamics 365 Customer Engagement (CE), it’s crucial to customize the user interface to match your organization’s brand and requirements.

One aspect of customization involves creating icons for custom entities, which not only enhances the visual appeal but also improves the user experience. Before customization, custom entities all use the same default icon (black puzzle piece), which can make things confusing for users if you have multiple custom entities.

Custom Entity with puzzle piece default icon (from Demo environment)

In this blog post, we will explore the process of creating icons as web resources for custom entities in Dynamics 365 CE.

This guide will show system administrators and customizers how to create a custom icon in a Model Driven App. We will walk through how to:

1. Design the icon.
2. Prepare the icon.
3. Create the web resource.
4. Associate the icon with an entity.

Understanding Web Resources in Dynamics 365 CE

Before diving into icon creation, you need to understand web resources in Dynamics 365 CE. Web resources are files stored within the system you can use to deliver several types of content, such as JavaScript, HTML, CSS, and images. You can create and store icons for custom entities as web resources. There are several things to keep in mind as you create web resources, which we will cover as we look at each step.

Step 1: Design the icon.

The first step in creating a custom icon is designing it. Consider the purpose of the entity and your organization’s brand guidelines. Icons should be simple, intuitive and visually appealing. You can use graphic design tools such as Adobe Photoshop and Illustrator or online platforms like Canva to create icons. Icons should easily identify what area of the system the user is navigating to, as these will still show when the site map is collapsed (see below image).

Collapsed site map (from Demo environment)

Step 2: Prepare the icon.

To ensure compatibility and optimal performance, follow these guidelines when preparing the icon:

• Use a transparent background.
• Keep the dimensions square (16×16 pixels for web application, 32×32 pixels for entity forms).
• Save the icon in a common image format like PNG or SVG (for web applications) and ICO (for entity forms).
• Keep the file smaller than 10 kilobytes.
• Use a scalable vector graphic (SVG) with transparency enabled for the best results.

Step 3: Creating the Web Resource.

To create a web resource in Dynamics 365 CE:

• Navigate to the Power Apps Portal.

Environment selection (from Demo Environment)

• Open the desired solution or create a new one.
• Click on “Web Resources” and select “New” to create a new web resource.

New web resource creation (from Demo Environment)

• Provide a name and display name, and select the appropriate image type (PNG or SVG for icons).
  • • When designing the icon, you can save it as PNG, SVG or GIF.

• Open advanced options to set language and enable for mobile.
• Upload the icon file and save the web resource.

Step 4: Associate the Icon with Entity.

Now that you have created the web resource, you need to associate it with a custom entity:

• Open the desired entity or create a new one.
• Click on the “Form Properties” button in the entity form.
• Open “Advanced Options” to display more options.
• Select the web resource you created in the “Choose table image” field.

Add icon from entity table properties (from Demo Environment)

• Save and publish the changes to make the icon visible.

Additional Considerations

If you are a system administrator or customizer, there are a few other points to consider about entity icons in D365 CE.

After associating the icon with the entity, thoroughly test it in different contexts to ensure its visibility and correct rendering. If necessary, refine the design, dimensions, or file format of the icon to meet your requirements.

Conclusion

When you customize the user interface in Dynamics 365 CE, it can greatly enhance the user experience and align the system with your organization’s brand. Follow the steps outlined in this guide to create and associate custom icons as web resources for your custom entities.

Remember to keep the design simple, follow best practices for web resources, and thoroughly test your icons to ensure a seamless user experience. With well-designed icons, you can make your Dynamics 365 CE implementation visually appealing and user-friendly.