Table of Contents

Working with Icons

Lesley Updated by Lesley

Icons can be added to different locations within an app. Here we will cover where and how to add icons.

Using Icons

Icons can be added to multiple places within your app, with a variety of icon options to choose from.

Page Menu

The page menu is the large menu at the top of your app, with links to each starting page. An icon can be added to any page in the page menu.

image alt text

To add an icon to a page in the page menu, select the page you wish to add an icon to in the pages section of the Knack builder. Then select the "Settings" tab in the top menu or from the settings icon next to the page name.

This will open the Settings for that specific page, where you will be able to add an icon to that page.

This will open a popup where you can choose from a list of icons and set the icon alignment.

The icon alignment can be set to either left or right.

  • Left: the icon will appear on the left side of the button text.
  • Right: the icon will appear on the right side of the button text.

You can learn more about working with page menus here.

Menu views allow you to add button or tab menus, which link to other pages in your app or external URLs. Icons can be added when adding or editing a link, while editing a menu view.

image alt text

To edit the view, select the menu view from the pages section of the Knack builder.

While editing the view, select the "Add Links" tab to add a new link to the menu or hover over an existing button in the preview to edit the link.

The menu button settings will open in a modal popup, there select "add icon" and you will be able to choose an icon.

Grid & Search Views

Icons can be used in both grids and search views, which are used to display multiple records in your app. Icons can be added to the grid columns in both these views using display rules based on the record values.

Grid Columns

To add icons, select the view from the pages section of the Knack builder to edit the view settings. In the view editor, hover over a column to select the edit icon.

The view settings will open in a modal popup. There, you can select the "Display Rules" tab and "Add Rule."

There are two sections to a rule, "If" and "Then":

  • If: use the If section of the rule to define when the icon will show.
  • Then: use the Then section to define what will be displayed only when the "If" statement is true.

Multiple display rules can be added by selecting the "Add Rule" button, or the top green "+" button.

Icons can be added to columns with special links as well, which link to view more details, edit, delete or to another page.

When editing a view using a table, hover over the columns containing the link and select the pen icon to open the column settings.

In the "Properties" section of the column settings, select "add icon" to add an icon to the column link.

Here you can learn more about using grid and search views.

Other Views

Icons can be added to special links within list, detail, calendar, and map views as well. These are links to view more details, edit, delete and link to another page.

Below you can see these links with icons in a list view.

image alt text

When editing these views, links can be added from the "details" tab and will be added to the view as an individual field.

To add an icon to these views, select the view from the Pages section of the Knack Builder to edit the settings. Then hover over the link you wish to add an icon to in the view preview and select the pen icon to edit the link.

In the field settings, select "add icon" to choose an icon for this field.

 

Click the following links to find more information about list, detail, calendar, and map views.

Complete List of Icons

You can find a complete list of icons that are available in Knack here.

  •   adjust
  •   adn
  •   align-center
  •   align-justify
  •   align-left
  •   align-right
  •   ambulance
  •   anchor
  •   android
  •   angle-double-down
  •   angle-double-left
  •   angle-double-right
  •   angle-double-up
  •   angle-down
  •   angle-left
  •   angle-right
  •   angle-up
  •   apple
  •   archive
  •   arrow-circle-down
  •   arrow-circle-left
  •   arrow-circle-o-down
  •   arrow-circle-o-left
  •   arrow-circle-o-right
  •   arrow-circle-o-up
  •   arrow-circle-right
  •   arrow-circle-up
  •   arrow-down
  •   arrow-left
  •   arrow-right
  •   arrow-up
  •   arrows
  •   arrows-alt
  •   arrows-h
  •   arrows-v
  •   asterisk
  •   automobile
  •   backward
  •   ban
  •   bank
  •   bar-chart-o
  •   barcode
  •   bars
  •   beer
  •   behance
  •   behance-square
  •   bell
  •   bell-o
  •   bitbucket
  •   bitbucket-square
  •   bitcoin
  •   bold
  •   bolt
  •   bomb
  •   book
  •   bookmark
  •   bookmark-o
  •   briefcase
  •   btc
  •   bug
  •   building
  •   building-o
  •   bullhorn
  •   bullseye
  •   cab
  •   calendar
  •   calendar-o
  •   camera
  •   camera-retro
  •   car
  •   caret-down
  •   caret-left
  •   caret-right
  •   caret-up
  •   caret-square-o-down
  •   caret-square-o-left
  •   caret-square-o-right
  •   caret-square-o-up
  •   certificate
  •   chain
  •   chain-broken
  •   check
  •   check-circle
  •   check-circle-o
  •   check-square
  •   check-square-o
  •   chevron-circle-down
  •   chevron-circle-left
  •   chevron-circle-right
  •   chevron-circle-up
  •   chevron-down
  •   chevron-left
  •   chevron-right
  •   chevron-up
  •   child
  •   circle
  •   circle-o
  •   circle-o-notch
  •   circle-thin
  •   clipboard
  •   clock-o
  •   cloud
  •   cloud-download
  •   cloud-upload
  •   cny
  •   code
  •   code-fork
  •   codepen
  •   coffee
  •   cog
  •   cogs
  •   columns
  •   comment
  •   comment-o
  •   comments
  •   comments-o
  •   compass
  •   compress
  •   copy
  •   credit-card
  •   crop
  •   crosshairs
  •   css3
  •   cube
  •   cubes
  •   cut
  •   cutlery
  •   dashboard
  •   database
  •   dedent
  •   delicious
  •   desktop
  •   deviantart
  •   digg
  •   dollar
  •   dot-circle-o
  •   download
  •   dribbble
  •   dropbox
  •   drupal
  •   edit
  •   eject
  •   ellipsis-h
  •   ellipsis-v
  •   empire
  •   envelope
  •   envelope-o
  •   envelope-square
  •   eraser
  •   euro
  •   exchange
  •   exclamation
  •   exclamation-circle
  •   exclamation-triangle
  •   expand
  •   external-link
  •   external-link-square
  •   eye
  •   eye-slash
  •   facebook
  •   facebook-square
  •   fast-backward
  •   fast-forward
  •   fax
  •   female
  •   fighter-jet
  •   file
  •   file-archive-o
  •   file-audio-o
  •   file-code-o
  •   file-excel-o
  •   file-movie-o
  •   file-o
  •   file-pdf-o
  •   file-photo-o
  •   file-powerpoint-o
  •   file-sound-o
  •   file-text
  •   file-text-o
  •   file-video-o
  •   file-word-o
  •   file-zip-o
  •   files-o
  •   film
  •   filter
  •   fire
  •   fire-extinguisher
  •   flag
  •   flag-checkered
  •   flag-o
  •   flash
  •   flask
  •   flickr
  •   floppy-o
  •   folder
  •   folder-o
  •   folder-open
  •   folder-open-o
  •   font
  •   forward
  •   foursquare
  •   frown-o
  •   gamepad
  •   gavel
  •   gbp
  •   ge
  •   gear
  •   gears
  •   gift
  •   git
  •   git-square
  •   github
  •   github-alt
  •   github-square
  •   gittip
  •   glass
  •   globe
  •   google
  •   google-plus
  •   google-plus-square
  •   graduation-cap
  •   group
  •   h-square
  •   hacker-news
  •   hand-o-down
  •   hand-o-left
  •   hand-o-right
  •   hand-o-up
  •   hdd-o
  •   header
  •   headphones
  •   heart
  •   heart-o
  •   history
  •   home
  •   hospital-o
  •   html5
  •   image
  •   inbox
  •   indent
  •   info
  •   info-circle
  •   inr
  •   instagram
  •   institution
  •   italic
  •   joomla
  •   jpy
  •   jsfiddle
  •   key
  •   keyboard-o
  •   krw
  •   language
  •   laptop
  •   leaf
  •   legal
  •   lemon-o
  •   level-down
  •   level-up
  •   life-saver
  •   lightbulb-o
  •   link
  •   linkedin
  •   linkedin-square
  •   linux
  •   list
  •   list-alt
  •   list-ol
  •   list-ul
  •   location-arrow
  •   lock
  •   long-arrow-down
  •   long-arrow-left
  •   long-arrow-right
  •   long-arrow-up
  •   magic
  •   magnet
  •   mail-forward
  •   mail-reply
  •   mail-reply-all
  •   male
  •   map-marker
  •   maxcdn
  •   medkit
  •   meh-o
  •   microphone
  •   microphone-slash
  •   minus
  •   minus-circle
  •   minus-square
  •   minus-square-o
  •   mobile
  •   money
  •   moon-o
  •   mortar-board
  •   music
  •   navicon
  •   openid
  •   outdent
  •   pagelines
  •   paper-plane
  •   paper-plane-o
  •   paperclip
  •   paragraph
  •   paste
  •   pause
  •   paw
  •   pencil
  •   pencil-square
  •   pencil-square-o
  •   phone
  •   phone-square
  •   picture-o
  •   pied-piper
  •   pied-piper-alt
  •   pinterest
  •   pinterest-square
  •   plane
  •   play
  •   play-circle
  •   play-circle-o
  •   plus
  •   plus-circle
  •   plus-square
  •   plus-square-o
  •   power-off
  •   print
  •   puzzle-piece
  •   qq
  •   qrcode
  •   question
  •   question-circle
  •   quote-left
  •   quote-right
  •   ra
  •   random
  •   rebel
  •   recycle
  •   reddit
  •   reddit-square
  •   refresh
  •   renren
  •   reorder
  •   repeat
  •   reply
  •   reply-all
  •   retweet
  •   rmb
  •   road
  •   rocket
  •   rotate-left
  •   rotate-right
  •   rouble
  •   rss
  •   rss-square
  •   rub
  •   ruble
  •   rupee
  •   save
  •   scissors
  •   search
  •   search-minus
  •   search-plus
  •   send
  •   send-o
  •   share
  •   share-alt
  •   share-alt-square
  •   share-square
  •   share-square-o
  •   shield
  •   shopping-cart
  •   sign-out
  •   signal
  •   sitemap
  •   skype
  •   slack
  •   sliders
  •   smile-o
  •   sort
  •   sort-alpha-asc
  •   sort-alpha-desc
  •   sort-amount-asc
  •   sort-amount-desc
  •   sort-asc
  •   sort-desc
  •   sort-numeric-asc
  •   sort-numeric-desc
  •   soundcloud
  •   space-shuttle
  •   spoon
  •   spotify
  •   square
  •   square-o
  •   stack-exchange
  •   stack-overflow
  •   star
  •   star-half
  •   star-half-o
  •   star-o
  •   steam
  •   steam-square
  •   step-backward
  •   step-forward
  •   stethoscope
  •   stop
  •   strikethrough
  •   stumbleupon
  •   stumbleupon-circle
  •   subscript
  •   suitcase
  •   sun-o
  •   superscript
  •   support
  •   table
  •   tablet
  •   tachometer
  •   tag
  •   tags
  •   tasks
  •   taxi
  •   tencent-weibo
  •   terminal
  •   text-height
  •   text-width
  •   th
  •   th-large
  •   th-list
  •   thumb-tack
  •   thumbs-down
  •   thumbs-o-down
  •   thumbs-o-up
  •   thumbs-up
  •   ticket
  •   times
  •   times-circle
  •   times-circle-o
  •   tint
  •   toggle-down
  •   toggle-left
  •   toggle-right
  •   toggle-up
  •   trash-o
  •   tree
  •   trello
  •   trophy
  •   truck
  •   try
  •   tumblr
  •   tumblr-square
  •   turkish-lira
  •   twitter
  •   twitter-square
  •   umbrella
  •   underline
  •   undo
  •   university
  •   unlink
  •   unlock
  •   unlock-alt
  •   unsorted
  •   upload
  •   usd
  •   user
  •   user-md
  •   users
  •   video-camera
  •   vimeo-square
  •   vine
  •   vk
  •   volume-down
  •   volume-up
  •   volume-off
  •   warning
  •   wechat
  •   weibo
  •   weixin
  •   wheelchair
  •   windows
  •   won
  •   wordpress
  •   wrench
  •   xing
  •   xing-square
  •   yahoo
  •   yen
  •   youtube
  •   youtube-play
  •   youtube-square

How did we do?

Other Customization Options

Live App Design

Contact