Free. PNG images in Black and White


Does anyone know where I can get png icons to use in navigations?

I have attached a screenshot of one where when the selection is in focus it is a white icon and when not in focus it is a black icon.

Thanks!

Tim B.

Try https://icons8.com.

2 Likes

What about svg icons from https://filemakericons.com/ that you can colorize within FileMaker?
You can use these in buttonbar segments with conditional formatting.

4 Likes

and

Late Addition

4 Likes

if on a Mac: SF Symbols - Apple Developer

5 Likes

I use Icon Manager from inDats quite a bit for .svg files, but I've not found an updated download site (old one is inactive) and the supposed new one (Syncfusion Metro Studio) is offering a new product with "free" license sign-up. Windows Only The new product looks to be much more robust with editing tools, etc. I've not used it as I'm not a Windows user.

Elemental_FM/Elemental_UX is an option which has a subset of the original inDats Icon Manager .svg files.

And I 2nd the motion by @mipiano for .svg (from FileMaker Icons or elsewhere) in that .SVGs are easy to set the style to within FM on button bars an such.

I'll enjoy exploring the other suggestions provided above; most new to me. :blush:

(Edit: clarification)

2 Likes

Fantastic.

1 Like

@GFS , welcome to TheSoup !

Google has material design icons

There was a short presentation from AutoEnter Live that showed how to adapt them for FileMaker.
5 Quick Ways to Use Material Design to Improve the UI/UX of your Solution | AutoEnter Live 2022

3 Likes

If you want svg icons, I often search here: React Icons

Find an icon, right click > "Inspect", locate the svg tag in the html and copy it (Cmd + c).

Paste your svg text in a file on your computer and save with extensions .svg. and now you can import it in a button in fm:

5 Likes

If you have Affinity Designer (a very affordable vector software that works on Mac, Windows, and iPad) here are steps to turn any vector into a filemaker-safe SVG (since they have specific requirements)

1 Like

You drag an SVG icon onto this web page and it adds the grammar for FileMaker’s state colorization dropping the converted SVG back into your downloads folder.

A deficiency with this is that it creates a gray icon by default.

To fix this, you can open your converted SVG file in a code editor and replace the “#ccc” with “#000” to make the default black again. Not all SVG icons convert well based on the objects used to create them.

Note there is a historical reason that SVGinator makes a gray icon; in an earlier version of FM (14???) some brilliant Claris engineer decided that the button bar dialog would be a good candidate for a hard coded “dark mode”. However this made the SVG icons almost impossible to see. Making the icons white “fixed” it but made them impossible to see in Windows. The gray was a compromise maintained to this day for legacy support.

I have tried SF symbols, but found that the SVG's do not work properly when imported into FileMaker. The display in the icon picker and what gets inserted into a button is just a blank square.

Have you found a way to make the SVG exports from SF Symbols work with FileMaker?

You can right-click an SF symbol and copy it as an image, type "SVG". Maybe you have to play around with the size a bit. Then you paste the clipboard into a text editor like BB-Edit and - important - remove the line beginning with "<rect...", which defines the background rectangle. Then save your text as "YOUR_ICON.svg".

If you still can't colorize your icon in FileMaker, try my free open source tool "FM SVG Maker" here in the soup. It can not deal with all SVGs, but a lot of them will work.

1 Like

SF symbol icons are layered: layer1, layer2 and background. I first edited the SVG (remove background) in Affinity Designer before importing it into FileMaker.

1 Like

Claris SVG grammar defined ...... still easier with FMSVGinator :slight_smile:
https://help.claris.com/archive/docs/14/en/svg/

+ 1

I like the SF Symbols icon set. Removing the "<rect >" tag fixes them.

For SVG coming from other sources, look for the "fill" attribute and delete it from the elements that you want to colorize.

the only pitfall is the license that limits the SF families usage to macOS :frowning:

I pay the $33 annual for the NounProject.com access to 5 million SVG icons royalty free. Being able to select the download size also makes it convenient. I'd waste far more time than the$33 is worth otherwise. Free is fine, but worth paying for IMHO

3 Likes

Can you point me to that?