AnsweredAssumed Answered

Button Bar Customized Icons

Question asked by PieroF on May 18, 2015
Latest reply on Mar 28, 2017 by MarcoB


Button Bar Customized Icons


Since I spent some time trying to create new icons for the new Button Bars object in FMP14 let me share my findings; hope this might save some time to other developers.


I find the new button bar feature quite good since it allows to prepare clean sets of buttons in any easy way, but since I didn’t find what I needed among the built-in icon for buttons I decided to build my owns.


First, the vector graphic image in SVG format must be used to prepare a customized icon.

As my main finding the SVG image must match the following criteria:

a.    the inner area of each polygon in SVG behaves as a placeholder: it will be filled with the color that will be chosen later for the icons applied to the button

b.    the outer area of all polygons in the SVG image behaves as if it were transparent; so it will show the button color behind the image

c.    however the above is true only if no color is defined in the SVG code for the icon. (like fill=“#0F0F0F”) Otherwise these colors are forced to the icon in place of those defined in the button settings


Example of SVG code for a “Pause” button:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">

<svg version="1.1" xmlns="" xmlns:xlink="" x="0" y="0" width="22" height="24" viewBox="0, 0, 22, 24">

  <g id="Livello_1">

    <path d="M0,0 L8,0 L8,24 L0,24 L0,0 z" />

    <path d="M14,0 L22,0 L22,24 L14,24 L14,0 z" />




In the above example the <path d=“…”/> lines describe the 2 portions of the icon. Note that NO fill=“…” clause is present in the <path> definition.


The procedure I use is the following (but obviously many other ways exist):

1.    I use iDraw to create the icon as a vector graphics. I decided to make 24x24 pixel documents, that iDraw can easily export as an .SVC. Note that a color is associated by iDraw to the created polygon; in the following example a white color is coded:


    <path d="M0,0 L8,0 L8,24 L0,24 L0,0 z" fill=“#FFFFFF”/>

    <path d="M14,0 L22,0 L22,24 L14,24 L14,0 z" fill=“#FFFFFF”/>


NB:    If the resulting SVG is imported as is into FMP, its icon will appear always white, whatever color is chosen in the button icon settings.

2.    To make the icon color customizable by the button icon settings the color must be removed.

I use TextWrangler (but probably also TextEdit will do) to open SVC as a text and remove all unwanted fill=“…” clauses.

Now the SVG file is ready for import into FMP.


One more warning: all built-in icons in FMP14 are offered in two versions: standard and outline. The latter has basically the same shape as the standard icon but each polygon is just outlined (not filled up).

Caution: drawing a polygon with transparent filling does not do what you expect: according to criteria a. above in any case the closed line will be fully colored by FMP… Happily iDraw provides a solution: it has a “profile” tool that transforms a line of any thickness into a polygon, thus allowing to prepare a SVG behaving as expected.