How I Add Clean, Visual Icons to Tables my Knack Database
- Dave Parrish
- 2 days ago
- 3 min read
Updated: 2 days ago
Sometimes the smallest improvements make the biggest difference in how people experience your app. One of my favorite tweaks in Knack is replacing boring Yes/No text values in tables with simple visual icons.
It’s not complicated to implement, but the result is a much cleaner interface that makes information easier to scan. Instead of reading through columns of “Yes” or “No,” users can instantly understand what’s happening just by looking at the icons.
In this post, I’ll walk you through exactly how I set this up in Next-Gen Knack.
Why I Prefer Icons Over Yes/No Values
When users look at a table with multiple columns—like Ordered, Delivered, or Paid—they’re often scanning quickly.
If every column just says Yes or No, it forces the user to read each cell.
Icons solve that problem.
For example:
✔️ A green check means completed
❌ An X could mean not completed
Blank means nothing yet
It’s a small UX improvement, but it makes a table much easier on the eyes when users are consuming a lot of information.
The Table Example I’m Using
In my example, I’m tracking order progress with columns like:
Ordered
Delivered
Paid
Each of these fields is a Yes/No field, but instead of displaying the text value, I display a visual icon when the value is true.
Step 1: Use a Yes/No Field with a Checkbox
First, I make sure the field is configured correctly.
When creating the field:
Choose Yes/No as the field type.
Enable the checkbox option for better usability.
Customize the text label if needed (like “Ordered” or “Delivered”).
This creates a simple checkbox users can toggle.
Step 2: Open the Table Column Settings
Next, I configure the display rules for the table column.
To do this:
Go to the table view in your page.
Click the column settings.
Navigate to Display Rules.
This is where the magic happens.
Step 3: Hide the Yes/No Text
Before adding icons, I remove the visible Yes/No text.
I do this by creating a rule that:
Applies to all records
Changes the text color to white
Since the background is white, the text effectively disappears.
This leaves the space ready for the icon.
Step 4: Add a Rule to Display an Icon
Now I add the rule that actually shows the icon.
The rule looks like this:
If:Delivered = Yes
Then:Display an icon.
I usually choose a checkmark icon for completed steps.
Step 5: Match the Icon Colors
To keep everything visually consistent, I match the icon color across columns.
For example:
Ordered ✔️ → Green
Delivered ✔️ → Same green
Paid ✔️ → Same green
Consistency makes the table feel polished and intentional.
Step 6: Center the Icon in the Column
Finally, I center the icon inside the column.
This small adjustment makes the table look cleaner and more balanced.
The Result
After refreshing the app, the table now behaves like this:
Checkbox unchecked → blank cell
Checkbox checked → green checkmark icon
Users can quickly scan the table and immediately see which steps are complete.
No reading required.
Final Thoughts
This is one of those simple Knack tweaks that dramatically improves the user experience. Instead of cluttering your tables with text values, you can use visual cues that make the interface easier to understand at a glance.
And the best part? It only takes a few display rules to implement.
Once you set it up for one column, you can reuse the same approach anywhere in your app.
If you build apps with Knack, this is definitely a small trick worth adding to your toolkit.
Interested in my Knack database services? ... Book a call with me here: https://calendly.com/daveparrish/callwithdave
Comments