This is a simple blog post but one I hope USD fans will find useful …. In this post I will explain how to show images / icons in your toolbar without needing to create a web resource.

I take no credit for this! I have recently been helping a college and fellow USD Fan learn USD. Mathew Raby from PowerObjects had used this approach in one of his first toolbars. I thought it was a simple / cool “trick”, hence this post. Thanks Mathew.

This maybe simple but if you haven’t tried this approach you might want to experiment with it. And you can use it in much more than just toolbars.

Tip: you can also copy / paste emoji characters to work in the same way!

I firmly believe having a pleasing interface matters! And making use of icons / images is an important part of that. Normally when we add an image to a toolbar button in USD we use a web resource and include it as the image on the toolbar as shown below;

Within USD my toolbar looks like this …

This approach works perfectly and allows you to include colour images etc. But is there a quicker simply way to achieve a similar effect?

There are a few sites you can find Unicode characters. The link below is the one I have used in this example. (Many others exist!)

http://jrgraphix.net/r/Unicode/2600-26FF

Simply find an icon you like and copy and paste it! Then remove your existing icon (if you have one.) See below how I changed my button.

Being simply a character I can use this in any text field. Therefore I have also added the “image” to my tooltip. I even altered my tab name.

Below you can see the result of my change. Notice that the phone “icon” is now shown as my toolbar button, tooltip and also in the tab name of my phone call.

Notice that the phone character displayed slightly differently in my application, within my browser and maybe even on this blog post you are viewing! When using USd I believe the way they show will be consistent but this might mean you need to experiment to find the best looking character to use. But I actually like the end result.

Obviously using a character as an icon has some downsides.

1. You can’t effect the size. If generally you want roughly 16×16 icons I think the character approach should work quite well. But larger icons will require an actual image.
2. You can’t have rich colours / shading etc. In my toolbars I like to keep things simple. I tend to favour grey / black icons. Therefore using a Unicode Character is a reasonable replacement. But if you like your icons to make use of colour then the Unicode approach might be limiting.
3. Images are more flexible as they can be more varied.

But having said this, using Unicode characters for commonly used “icons” in your toolbar is quite a simple approach. You will find them great for things like back / forward arrows etc. And they are simple to use and I really like the idea of using them in tab names and other areas we might not commonly be able to include images.

I said this was a simple idea ….. but aren’t they sometimes the best? Thanks Mathew Raby.