WinForms - Icon Builder - Custom Icons

WinForms Team Blog
23 May 2019

A while back, we announced the availability of our Icon Builder in the Microsoft Store. The tool provides hundreds of SVG icon templates drawn by DevExpress designers, for you to mix and adapt to your own color schemes.

In the latest version of Icon Builder we added a frequently requested feature: you can now add your own SVG icons to the tool. And not just that, you can use our automatic conversion feature to make your icons fit in with our standard set and adapt to skins and palettes.

To make your icons available to Icon Builder, switch to the Library Settings tab and click Add Folder, then choose a folder with custom icons. You can add as many folders as you need. Icon Builder creates a category for each sub-folder, and you can rename, hide or remove categories as required.

Add Folder in Library Settings

Categories are available from the main Icon Builder screen. You can choose categories to quickly navigate between different icon packs.

Categories

3rd-Party Icon Processing

At DevExpress, our designers follow a set of rules when creating icons. This is important, because our icons are meant to work correctly in our controls, which usually require certain standard icon sizes and which change their appearance based on skins and skin palettes.

Icons downloaded from the internet can have proportions that scale badly to standard icon sizes. They most likely also use colors incompatible with our skins. Of course you are free to use them as they are, but DevExpress icons will automatically adjust to skin settings, while third party icons – by default – won’t.

Here’s a Ribbon with standard DevExpress icons in the Common and Print button groups and 3rd-party icons downloaded from the web in the Custom Icons group.

Standard and Custom Icons

When the application uses a dark palette, the DevExpress icons change. But the 3rd party icons stay the same, which results in a very low contrast appearance.

Standard and Custom Icons with Dark Palette

To solve this problem, we have added the button Adjust Icon Settings to the Custom Icon Folders configuration page.

Adjust Icon Settings

When you click this button, Icon Builder processes icons in all checked folders. A selection dialog comes up where you can check individual conversion results and change colors as needed.

Note that the conversion process also attempts to optimize the bounding boxes of source icons so that proportions remain correct when icons are scaled to standard sizes later.

Conversion Process

Once you click Convert, new icons are placed into a sub-folder .iconbuilder in the original path. Of course your source icons remain intact! If converted icons are available, they will now be shown in place of the original ones inside Icon Builder.

For comparison, here’s the result of converting the same 3rd party icons as before, with different skin settings:

Different Skin Settings With Converted Icons

Let’s Hear What You Think

Have you used Icon Builder yet? Are you looking forward to using custom SVG icons with full skin support in your applications? Please feel free to comment below or open Support Center tickets for discussion.

12 comment(s)
Lluis Franco
Lluis Franco

Great job guys! Absolutely stunning! :D

I've started converting some icons (+250) for our main product. Is there an easy way to add all these icons to a dedicated project in the solution (CommonImageResources), and then access to these images from other projects? Maybe via an SvgImageCollection?

I assuming is not possible add more icons to your gallery... :S

23 May, 2019
Nate Laff
Nate Laff

Great update! I have been editing SVG images from Axialis by hand to add the DX colors using their Fluent sets. This is a much better experience. Still have about half of them to go so this will make life a little bit more awesome.

23 May, 2019
Juan Betancourt
Juan Betancourt

And this is because things like this make DX #1

23 May, 2019
Rick Mathers
Rick Mathers

This is really awesome, something I would really love to see is this program produce a Font File that can be used as well.

23 May, 2019
Aldo G.
Aldo G.

Wow!! I had that issues and I did not know how to resolve it! The automatic conversion it's absolutely amazing!

23 May, 2019
Alvis Kums
Alvis Kums

This is HUGE!!!

24 May, 2019
Yahya
Yahya

Magical. Mind boggling. Thanks.

24 May, 2019
Appy Developers
Appy Developers

Very helpful work, thanks a lot.

24 May, 2019
Luiz A D R Marques
Luiz A D R Marques

Very cool!

24 May, 2019
Mark Bissett 1
Mark Bissett 1

Great little tool, but is it just me who thinks these SVG icons look terrible - like going back to the 1990s...

24 May, 2019
Julian Bobbett 1
Julian Bobbett 1

Can these be saved as .ico files.? If so, they can be used as icons for applications. If not, the name is misleading.

28 May, 2019
Martin Pelletier
Martin Pelletier

Will DevExpress add more categories and more icons in the future? And how about adding your icons from your assemblies?

Will sure import all my Axialis svg icons, they have a good library so far. It will just be time consuming.

14 June, 2019

Please login or register to post comments.