Adding a Custom Icon to a FireMonkey Button

Posted by on in UI
In today's blog post, I am outlining how to create custom FireMonkey buttons. In this case, I am using the blue Windows 10 style included in RAD Studio 10.2 Tokyo. 

Step 1: Create a new FireMonkey Application

Launch 10.2 Tokyo and go to File > New > FireMonkey Application (Delphi or C++) and select 'Blank Application'. Drop a TStyleBook component onto your form and double-click it to open the integrated Style Designer. Select 'Open' and navigate to your Styles directory (C:\Users\Public\Documents\Embarcadero\Studio\19.0\Styles) and select the Windows10ModernBlue style.

Next, click on 'x' to apply the style and close the Style Designer.
With the Form selected, navigate to the Object Inspector and set StyleBook to StyleBook1. This will apply the custom Windows theme to your application.

Step 2: Load glyph icons

Add a TImageList control onto your form. Double-click on the image list, and then add the icons of your choice. See the screenshots below for detailed steps. 

Step 3: Create a custom button design

Drag and drop a TButton onto your form and resize the control. The default style applied to TButton is "ButtonStyle".
Set the Images property to ImageList1 and ImageIndex to 0 which corresponds with the custom settings icon from the image list.
Note: While you can load a custom icon for Button1 without using the Style Designer, creating a custom style allows you to resize the icon and make additional changes including adjusting glyph alignment and opacity.
Right-click on the button on your form and select 'Edit Custom Style...'. This will launch the integrated Style Designer. It will also create a new style element, Button1Style1. Select Button1Style1 from the Structure pane. Click + and select glyphstyle.
Set the Images property to ImageList1 and ImageIndex to 0 which corresponds with the custom settings icon from the image list.
Click on the bounding box to increase the size of the icon.
For further customization, you could drop an effect onto the glyphstyle element such as the BlurEffect.
Click 'x' to apply the changes and close the Style Designer. 
You should now see a new Button1Style style element for TButton in the StyleLookUp drop-down list.
Shown: Icon blur on mouseover

Custom Icons

There are many great online resources for free and paid icons. In today's demo, I used an icon from a great icon site called They offer both free and paid icons and have an easy online tool for changing the fill and stroke color to match your UI design and support multiple resolutions. 

Gold User, Rank: 5, Points: 558
Senior Product Manager, RAD Studio


  • michel G9098
    michel G9098 Friday, 30 March 2018

    Hello Sarina

    how to fix the "crappy" look of the BindNavigator component in Android (in the version tokyo 10.2.1 - 10.2.2 - 10.2.3) ?

  • Erik F9745
    Erik F9745 Friday, 24 November 2017

    Looks good. How can I add this new button as a MyBlurButton on the Tool Palette?

  • Sarina D
    Sarina D Tuesday, 28 November 2017

    In this case, we are just creating a custom style, not a new styled component. You can however reuse the custom style element throughout your application.

    You might also want to have a look at:

  • Yilmaz Yoru
    Yilmaz Yoru Thursday, 23 November 2017


  • Sarina D
    Sarina D Tuesday, 28 November 2017


  • Icons8
    Icons8 Friday, 17 November 2017

    Icons8 here. Sarina, thank you for using our icons!

    I wonder if you guys can improve the workflow with - if you can drag-n-drop or copy-paste? The idea is to avoid saving the file and opening it again. If we can help improve it for you, please let us know.

  • Sarina D
    Sarina D Tuesday, 28 November 2017

    Hi Icon8,
    Thanks for your comment. Your icons are really nice. I will need to have a look at the link you mentioned.


  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: