Can you keep a secret?
Share
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 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

Search
Hand Drawn
10
📂 Hand Drawn
1st

📂 Hand Drawn
arrow

📂 Hand Drawn
circled 2

📂 Hand Drawn
Dog Tag

📂 Hand Drawn
Goodnotes

📂 Hand Drawn
ok

📂 Hand Drawn
Password

📂 Hand Drawn
Speech Bubble

📂 Hand Drawn
Us Dollar

📂 Hand Drawn
user

Cloud
10
📂 Cloud
Chat

📂 Cloud
contract

📂 Cloud
level 1

📂 Cloud
list

📂 Cloud
Netflix

📂 Cloud
password

📂 Cloud
phone

📂 Cloud
user

📂 Cloud
wifi

📂 Cloud
work

Color
2
📂 Color
1 circle c

📂 Color
Circled 2 c


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
Search
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:

Format(
thisRow.[Icon Wizard]._URL Template,
60,
"FF0000"
)
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.

Demo Table
Here is an demo table that uses the Icon Wizard. Click on a card to see it in action.
Search
Dog Tag
Dog Tag from the style Hand Drawn in a lovely Purple color.
Us Dollar
Us Dollar from the style Hand Drawn in a lovely Mint color.
Netflix
Netflix from the style Cloud (full-color).


Icon Wizard
1






















Icon Wizard Text Templates
0



























Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.