Make SVG icons recolorable in FileMaker.

1. Start with a simple SVG.

This small plus icon uses one filled path. Its explicit green fill makes it useful for seeing the difference between a fixed color and a color controlled by FileMaker.

<svg xmlns="http://www.w3.org/2000/svg"
     width="24" height="24" viewBox="0 0 24 24">
  <path fill="#203e33"
        d="M10 3H14V10H21V14H14V21H10V14H3V10H10Z"/>
</svg>

Copy this source into the converter’s SVG source field. Alternatively, choose a simple icon from the icon library and retain any applicable license information when using third-party artwork.

2. Choose Recolor in FileMaker.

Open the SVG converter, paste the SVG, select Recolor in FileMaker and convert it. Change the preview color and try a dark background. The plus should remain recognizable at 16 and 24 pixels.

Download the converted SVG. In this mode the browser’s preview color is not baked into the download. Keep original solid colors serves a different purpose: use that mode when the artwork must retain its colors.

Claris explains that eligible shapes inherit FileMaker’s icon fill when no explicit fill color overrides it. For an already filled, simple path, removing the fixed fill illustrates that principle. It is not a general conversion method for stroke-based artwork.

3. Add the converted icon to a button.

In a working copy of your file, enter Layout mode and open Button Setup, or Button Bar Setup for a segment. Choose an option that displays an icon. Use the custom-icon add control to import the downloaded SVG, then select it.

Open the Inspector’s Appearance tab, select the button icon styling and choose its fill color. Adjust the icon size and padding so it has breathing room beside the label. FileMaker Pro is required and sold separately; consult the Claris button-formatting instructions for the controls.

4. Check the states people will see.

Use a visible label such as “New contact” while you review the icon. Return to Browse mode and check the normal, hover and pressed states that your interface uses. If the action can be unavailable, check its visual treatment and script guard separately; appearance alone does not prevent execution.

• Does the shape still read clearly at the actual button size?
• Is there sufficient contrast against both normal and selected backgrounds?
• Does a light or dark theme change expose an unwanted fixed color?
• Do cutouts remain open rather than turning into solid blocks?

The converter preview is a browser rendering. Review the downloaded icon in your FileMaker version and on each target platform before sharing the file.

If the icon still will not recolor

First check that you imported the converted download rather than the original. Convert again with Recolor in FileMaker selected. If the artwork uses strokes, the converter turns supported strokes into filled shapes; simply removing fill="none" can fill areas that should remain empty.

For complex artwork, simplify it in a vector editor before converting. Text, gradients, masks, clipping and other unsupported features need preparation. A simple icon usually survives small sizes better than a detailed illustration. The converter’s own messages describe input it cannot safely prepare.

Continue reading

• Design consistent button states in FileMaker