Omnis Technical Note TNJC0010Mar 2021
for Omnis Studio 10.2 or above
By Omnis Engineering
SVG images should now be used for component icons in your Omnis applications in preference to PNG images, as used in previous versions. The main benefit of using SVG icons is that they are vector based and are inherently scalable, so you only need to create one single SVG file to cater to multiple sizes for component icons – therefore as your app is displayed on different devices, such as desktop or mobile, any SVG icons will scale seamlessly (when using PNG, you had to create a separate image file for each icon size).
A further benefit of using SVG is that in Omnis you can “theme” an SVG icon, so the icon color will always match the current style. And yet another benefit of SVG support in Studio 10.2 is that you can use any of the thousands of freely available open source SVG icons in your apps (with the proper attribution in your product licensing), such as the ‘Material’ icons provided by Google – in fact, we have provided an icon set in Studio 10.2 comprising over 100 of the material icons which have also been themed (these are described in the online docs, link at the end of this tech note).
Using SVG icons
SVG icon files are stored in an iconset folder and a single icon is assigned to a component by setting its $iconid, the same as in previous versions. The file naming for SVG icon files is not as strict as for PNG files, since the file name does not require an integer ID or any information about the image size. When you assign an icon to a JS component, any SVG icons in Omnis (stored in the ‘iconsets’ folder) will appear in the Select an Icon dialog, alongside any existing iconsets containing PNG icon files (such as the ‘studio’ iconset).
In Studio 10.2 when you create or edit a remote form, the ‘material’ icon set will be available when you open the icon selection dialog – these are located in a special iconset folder in the html/icons folder, but you can add your own SVG icon sets to the ‘iconsets’ folder (note the ‘icons’ folder in the Omnis root folder is for legacy icon data files and should not be used for iconsets). If you want to use icons from your own iconset, you need to add the iconset name to the $iconsets library preference.
When you assign an SVG icon you can select one of the standard sizes (16x16, 32x32, 48x48) or create a custom size (see below), and an SVG image will always expand (scale) to fit to the specified icon size.
Using Themed SVG Icons
For this test using the sample libary from the zip file, you need to place any SVG files (your own or from the zip) in an iconset folder named ‘test’ inside the ‘iconsets’ folder in Omnis. Open the library (which has $iconsets library preference set to ‘test’), then open the ‘rf_svgicons’ remote form in design mode and you will see we have added some buttons to the form that use themed and non-themed icons, to show you the difference (you can use the non-themed icons for window components). You can change the JS theme using the Ctrl-J option when editing the remote form, and you will see the themed icons will change color (we selected the 'fall' theme in the screenshot below). You can open the remote form using Ctrl-T and scale the browser view (using +/-) to see the buttons and icons change size.
You can try adding a custom icon size (if you are using our form, you may like to copy one of the buttons and resize it before assigning a larger icon). To do this, open the Select an Icon dialog by assigning $iconid for the button, click on the icon name under the ‘Page’ list, click on the ‘+’ button in the ‘Size’ list header, enter a Width and Height size (e.g. 128x128), click on the ‘Keep aspect ratio’ and ‘Add to size configuration’ options, click on OK, and then click on Select to select the icon with the new size.
When you deploy your application, you need to remember to copy all your own icons (all iconset folders) to the Omnis Server tree, which you can manage in Studio 10.2 using the Deployment tool.
There is more information about creating or adding SVG icons to your JS components in the Omnis online docs:
Specific information about using SVG icons is found here:
Or using Themed SVG icons is described here: