This article explains how to add, change, and adjust the design of icons, as well as the differences between Font Awesome and Material Symbols and the available customization options.
What is an icon box?
When placing an icon on a page, you'll use an icon box.
Studio.Design supports two types of icons: Font Awesome and Material Symbols.
Each offers the following design options.
Adjustment | Font Awesome | Material Symbols |
Display size | ○ | ○ |
Color | ○ | ○ |
Line weight | × | ○ |
Line style | × | ○ |
Fill | × | ○ |
Add an icon box
In the navigation menu on the left, click the Add icon
.In the Add panel, go to the [Basic] tab and click [Icon].
A default heart icon
will be added to the screen.
Change an icon
Select the icon on the screen.
With the icon selected, press the Enter key or double-click it.
The icon settings panel will appear on the left.
Choose an icon.
You can search by keyword using the search box at the top of the panel. (English only)
Switch between Font Awesome and Material Symbols using the tabs at the top of the panel.
When you select a new icon, it will replace the one on the screen.
Recently used icons
[Recently Used Icons] saves up to 15 of your most recently used icons. Once you exceed 15, the oldest ones are removed.
History is tracked separately for the Material Symbols tab and the Font Awesome tab.
History is saved per user (account).
Adjust the icon design
How to adjust the design
Select the icon and open the right panel.
In the right panel, select the [Icon] tab and configure each of the options below.
Color
Set the icon's color and opacity.
You can specify the color using a HEX code and adjust the opacity.
Clicking the color swatch opens the color palette, where you can fine-tune your settings.
Size
Enter a value to set the display size. The unit is px (pixels).
Weight
※Material Symbols only
Set the line weight of the icon. Drag the slider to adjust the thickness.
Style
※Material Symbols only
Set the line style of the icon.
Choose from Outlined, Rounded, or Sharp.
Fill
※Material Symbols only
Choose whether the icon is filled.