Can you keep a secret?

Explore

Templates

Icon Wizard

Handy UI for finding and using icons from Icon8.com's collection.

This table makes using icons in your doc really easy. Simply click the Add New Icon button and the popup window will guide you through finding icons from Icon8.com’s collection. For more info and a video guide, scroll further down this page.

Icon Wizard

The Icon Wizard table below allows you to easily add icons from the wonderful

icons8.com⁠

website. Available icons are displayed below. Certain styles (such as Hand Drawn) support dynamic recoloring, so icons that you add from that style will be recolored in the Knowledgebase to match the category you selected.

I’m quite proud of the + Add New Icon layout. Give the button alongside a click to try it out. The layout supports two ways for finding new icons. The first uses Keywords (or specifically, Icon Keys) to generate images via their API’s URL. The second works alongside their Search Page, allowing you to use an HTML Fragment that they generate.

Once icons are imported, we transform each into a template which can be used by Coda to generate icons with variable sizes and variable colors really easily.

New Icon

⁠

Hand Drawn

⁠

Icon Styles

The Icon Styles table below allows you to manage the available styles that the Icon Wizard can use. Each style shows a preview icon using the Icon Key “user”. To use the icons8 API successfully, you need to use “pixel perfect” sizes. These are sizes which the designer has specifically optimized for, and that their API pre-caches for availability.

⁠

New Icon Style

⁠

Hand Drawn

carbon-copy

Sizes. 100px / 200px

Color. #000000

✅ Dynamic recoloring

Color

color

Sizes. 96px / 96px

Color. #2196F3

✅ Dynamic recoloring

Cloud

clouds

Sizes. 100px / 200px

Color. #000000

Bear Icons Glyph

external-bearic...

Sizes. 64px / 64px

Color. #000000

✅ Dynamic recoloring

⁠

Adding a New Icon

There are two ways to add a new icon to the Icon Wizard.

Entering an icon’s Icon Key.

Icon keys are the URL slug that refers to a particular icon available on the icons8 system.

In practical terms, it’s the filename of the icon supplied when you select to use their CDN.

For the icon alongside, the Icon Key has been highlighted in orange.

When I’m looking to add a new icon, I just try a couple keywords or phrases until I find something I like :)

Manual import from icons8.com

Icon8 provide a CDN for their icons which is free to use.

When you find an icon, click it and you’ll see a modal popup window.

Within that window is a Code Fragment.

Copy that into the wizard on this page, and we’ll strip out the unnecessary bits so that you can use the icon directly.

⁠

Using Icon Wizard In Your Projects

The Icon Wizard table makes finding icons easy, but also gives you flexibility with using these icons too.

There are two ways to use an icon from the Icon Wizard:

Using its default size and color

Using a custom size and/or custom color*

* Not all icon styles support recoloring

All columns that are useful to you are prefixed with an underscore “_”. *

* @Coda Community, let me know if you think this is confusing. I wanted a way to clearly show which columns are available to use vs the columns I’m using for the inner workings of the table.

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 (number column)

_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)

{1} Icon size in pixels

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 “#”

Correct. 0000FF

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.

⁠