Icons for WebOffice flex

You can define custom icons at two different locations in WebOffice 10.9 R3 project for WebOffice flex:

predefined queries (+ geolocator query) for the widget Advanced Search

external applications in search results


Use Existing Icons

You can find prepared icons in C:\Tomcat\webapps\<WebOffice application>\pub\images\flexjs\



Be aware that you may have to adjust icons when changing color values in Skins for WebOffice flex.

when using a different baseColor you have to adapt icons for predefined queries

when using a different footerColor you have to adapt icons for external applications


Create New Icons

In order to accomplish a consistent result, follow the advices below when creating custom icons:

1.Try to stick to one style with all your query icons - i.e. either all are filled or all are outlined

2.The canvas should be 48x48 px minimum. They will be displayed with 24x24 px but HD displays will need the double resolution.

3.The icon inside the canvas should be aligned to the center and have a size between 32x32 and 36x36 px depending on the icon.

4.The icon has to be inverted - this means that the background is colored in your desired baseColor (usually white) and the icon itself is transparent. WebOffice flex client will use the transparent area to display your icon using the inputColor by default and darkOverlayColor for hover.

5.Stick to monocolor icons, try to avoid plastic, 3D-looking icons. WebOffice flex is using flat design.


Example workflow to customize icons in GIMP 2.8:


1.Initial input has the size 128x128 px


2.Image > Scale Image > 36x36 px


3.Image > Canvas Size > 48x48 px + center icon


4.Layer > Layer to Image Size


5.Image > Mode > RGB

6.Layer > Transparency > Remove Alpha Channel


7.Layer > Transparency > Color to Alpha


8.Save Image



Detailed information regarding the customization of the WebOffice flex client can be found in chapter WebOffice flex Client.