Default Icon Settings
If you want to use the icon at it’s default size and color, there are a bunch of columns available to you to try make your life easier:
Image. This displays the icon as an image. _Image The icon as an image at its default size _Image Big And an image at 2x resolution URL. This is the URL to the icon. Use with Image() formula or in an Image URL column. _URL URL for the icon at its default size _URL Big URL for 2x resolution version Size. The icon’s size in pixels. Because all icons are square, this is both the width and height: _Size Big (number column) How to Use
Here’s the easiest way to use an icon in one of your tables:
Create a new Lookup Column and select “Icon Wizard” as the relevant table. Click on the dropdown arrow on the right of the new column’s heading. Choose “Insert Related Column” and select either _Image or _Image Big, depending on how big you need it to display.
Custom Size or Color
Alternatively, if you’d like to specify a custom size or color for your icon then use the _URL Template column.
This column provides a template for use with Coda’s Format() formula. Here’s an example:
https://img.icons8.com/carbon-copy/{2}/{1}/dog-tag.png
Explaining the URL Structure
carbon-copy This is the URL slug for the Icon Style. dog-tag.png This is the icon’s filename which is the Icon Key converted to a URL slug (lowercase, spaces → hyphens) For pixel-perfect icons, specify sizes in multiples of the icon style’s base size. {2} Icon color in hexadecimal notation This needs to be ALL CAPS and WITHOUT the “#” Incorrect. #445566 (mustn’t include “#”) Incorrect. 4faabb (letters must be uppercase) Incorrect. blue (must be hexadecimal notation) How to Use
In your table, add a new Lookup column and select “Icon Wizard”) from the available tables. Add a new Image URL column, then add this formula:
This produces a RED icon (#ff0000 is red in hexadecimal) 60x60 pixels in size
Icon Styles that don’t support recoloring
If the Icon Style DOESN’T support recoloring, the “{2}” in the _URL Template will be replaced with whatever the icon style requires for that part of the URL. This is so that any attempts to recolor using Format() will be ignored and you’ll always get a valid URL.
I designed it this way so that you don’t have to worry about any conditional coding to deal with various icon styles.