When FileMaker 14 was released in 2015, it included several major new features. Notably, FileMaker was able to support buttons with icons. A staple of web and app design, being able to now incorporate them into Claris databases was a game-changer. These days, FileMaker comes pre-equipped with 140 glyphs available for use. But perhaps more importantly, it can also import custom designs. User interfaces can be customized to fit the brand and communication standards of the organization. Rather than making do with the best icon option available, developers can input the best icon for communicating the idea or action it’s associated with.
A variety of online repositories offer free or low-cost icon options for download, making it easier than ever to find that perfect design. PK Information frequently use providers such as:
FileMaker supports both PNG and SVG icons. PNGs are easier to create and easier to preview as more devices have the ability to render them. However, we exclusively use and recommend the SVG option instead. SVG, or scalable vector graphic, is similar to an EPS file in that it’s vector-based. That means it’s built using mathematical equations instead of pixels, and consequently can be scaled to any size without loss or change of quality. FileMaker can scale the PNG icons, but pixilation will be noticeable eventually. Additionally, SVGs are supported by web browsers (whereas EPS files rarely are due to the proprietary nature of this file type), and can consequently be used in accompanying websites and print materials for brand consistency.
If you can’t find just the right design for your software’s needs, then what? You can make one yourself!
How to create FileMaker-compatible SVGs using Adobe Illustrator
Numerous design software packages can export SVGs, some paid and some free. However, we use Adobe Illustrator at PK Information.
For this, you’ll need:
Adobe Illustrator 9 or newer
FileMaker 14 or newer
A code editor
And for your reference, here’s the specific software we’re using here:
Adobe Illustrator 2021 v25.1 (Creative Cloud)
FileMaker 18
Visual Studio Code 1.43.1
1. Launch Illustrator and design your icons on separate artboards
We begin with artboards that are 432 pts square, which is equivalent to 6”. The pen tool and shape tools are great for creating uniformity—or you can use custom brushes with the pen tool or the paintbrush tool for a more organic feel.
2. Expand illustrations, then use your pathfinder to compile shapes
To convert lines to shapes, use the expand tool located in the object dropdown menu. Select the paths in question, and make sure to expand both the fill and stroke.
Text can also be converted with this same manner (select the object and fill options). Alternatively, you can convert to outlines in the type dropdown menu.
Then use the pathfinder tool to combine all of the elements within one icon to minimize the number of objects. We most often use the Unite and Minus Front tools. If the icon will have multiple pieces, select them all and create a group.
3. Resize your artboards to the same size as the illustrations
Open the Artboard Tool (Shift + O). Double-click on the icon and the artboard will automatically resize to its dimensions.
4. Save or export as SVG files
There’s a variety of ways to save and export SVG files from Illustrator. This walkthrough from CSS-Tricks is a great guide to understanding the nuances of each option.
We recommend using the “Save As...” approach. Check the “Use Artboards” option.
SVG Profiles: SVG Tiny 1.2
Type: SVG
Subsetting: None (Use system Fonts)
Image Location: Embed
———More options———
Decimal places: 2
Encoding: Unicode (UTF-8)
Don’t check: Responsive, Include Slicing Data, Include XMP
5. (Optional) Export complementing PNG or JPEG files
FileMaker will also accept PNG files for icons, but they won’t scale seamlessly the way SVGs do. However, including a PNG or JPEG copy can be helpful to quickly review the icons on your desktop, particularly as not all native photo viewers easily read SVGs.
PNGs can be exported with a transparent background, but JPEGs will default to white. Both are lossy file formats while SVGs are lossless.
6. Open your FileMaker database and import the icons
Open your FileMaker database
Navigate to the layout you want the icons on
Go to Layout Mode (View > Layout Mode or Cmd + L)
Double-click an existing Button or Button Bar, or create a new one
In the Button Setup panel, make sure the button is on a style that includes an icon
Click the + button
Navigate to the icon folder you downloaded
Select the icon(s) you want to import
Click Insert
Select the desired icon(s) and apply them to the Button or Button Bar
Close the Button Setup panel
Use your new icon(s)!
Note: Older versions of FileMaker required a class=”FM_Fill” to be added to the SVGs so they’d show up in your button setup panel. That’s not the case with FileMaker 18 or newer. If your button setup panel displays blanket boxes were your imported icons should be, open the icon in a code editor and add the class to it, save, then reimport to see if that’s resolved your problem.
If you’re looking for specific directional arrow or healthcare-related icons, check out the ones PK Information has created and published for free!
PK Information is a FileMaker-certified development agency serving the Tampa Bay, Miami Lakes, and Knoxville regions. We believe that great software can change everything. Do you need UI/UX assistance from award-winning developers? Contact us today!
SUBSCRIBE
Sign up with your email address to receive future posts like this directly to your inbox.