Skip to main content

Icon Library

  • 4 minutes to read

DevExpress VCL controls ship with a diverse library of icons created by our design team. The library includes both full-color and grayscale icons you can use as glyphs in UI elements of your application.

Library Installation Path and Custom Icons

The DevExpress Icon Library is installed in the following folder: %DevExpress VCL Installation Folder%\ExpressLibrary\Sources\Icon Library\. All icons are arranged into collections and categories according to the theme and purpose (for instance, Actions or Arrows). You can manage icon collections available in the Image Picker dialog, extend the Icon Library with custom icon folders, and use custom icons like built-in icons. Custom icon folders can be located anywhere in the file system.

Note

Custom/third-party icons may require pre-processing with our SVG Icon Builder tool to adapt these icons to DevExpress VCL skins and palettes. Our tool can adjust icon size and color settings according to DevExpress guidelines.

Image Picker

Image Picker is a design-time dialog that you can use to browse the Icon Library and select required images for a target control. The dialog can limit the icon list displayed within the gallery according to the specified filtering criteria, such as collections, categories, sizes, and the current image name entry.

VCL Shared Libraries: The Image Picker Dialog

Font Icons

The Image Picker dialog allows you to select and use font icons available in Microsoft Windows® 10 and newer operating systems.

VCL Shared Libraries: The Font Icons Tab Layout

Important Font Icon Limitations

A font icon is an SVG image that contains a character from a special font shipped with the operating system. Since an SVG image with text contains only font glyph references rather than actual font glyphs, an application can display a font icon only if the corresponding font is available in the target operating system:

Microsoft Windows® 11

This operating system ships with the following special fonts: Segoe Fluent Icons (default) and Segoe MDL2 Assets.

DevExpress-powered applications use glyphs from the Segoe Fluent Icons font to display font icons:

VCL Shared Libraries: A Font Icon Example in Windows 11

Microsoft Windows® 10

This operating system ships with the Segoe MDL2 Assets special font:

VCL Shared Libraries: A Font Icon Example in Windows 10

Important

Developer Express Inc does not embed, include, or distribute the font icon set. You must independently review and agree to license third-party icon collections from their respective owners. Use these icon fonts only if client machines run Microsoft Windows® 10 or newer.

Manage Custom Icon Collections

To add a custom icon collection, click the Add a custom collection button in the Image Picker dialog, select the target folder in a shell dialog, and click the Select button.

VCL Shared Libraries: Add a Custom Icon Collection

Like predefined DevExpress Icon Library collections, the added folder should include nested category folders populated with images. The Image Picker dialog uses the target folder’s name as the collection name displayed in the Collection box. To remove a selected custom collection from the DevExpress Icon Library, select the required collection and click the Remove the selected collection button:

VCL Shared libraries: Remove a Custom Icon Collection

Note

The DevExpress Icon Library maintains the list of custom icon collections in the following Microsoft Windows® Registry directory:

%Computer%\HKEY_CURRENT_USER\SOFTWARE\Developer Express\IconLibrary\Collections

You cannot remove predefined icon collections from the DevExpress Icon Library. A custom collection remove operation does not remove the corresponding folder from the file system.

Image Picker Accessibility

The Image Picker dialog is available for all DevExpress components that work with images.

Components with Individual UI Element Icons

The Image Picker dialog is available for any DevExpress component that can load an individual UI icon at design time. For example, any Glyph property with the TdxSmartGlyph type displays an ellipsis button in the Object Inspector.

VCL Shared Libraries: A Glyph Property Ellipsis Button

You can click this button to invoke the Image Picker and select the required image from the DevExpress Icon Library or a custom image collection.

TcxImageList

You can use the Image Picker to populate a TcxImageList component with images at design time. Double-click the component or invoke its context menu and select the Edit… item to invoke the Image List Editor. To invoke the Image Picker dialog, you can press the Alt+Ins key combination or click the Add Image button and select the Load From DevExpress Icon Library… menu item.

VCL Shared Libraries: Invoke the Image Picker for an Image List

TcxImageCollection

Right-click a TcxImageCollection component and select the following context menu item to invoke the Image Picker dialog.

VCL Shared Libraries: Invoke the Image Picker to Populate an Image Collection

Alternatively, you can click the Edit… context menu item to open the collection editor, create or select an image collection item, and double-click its Picture property value field in the Object Inspector to invoke the Image Picker dialog.