Now Assistant
Tangere Elements

Icons

In Now Assistant you can show icons from the icon set inside your Cards.

Best Practices

Make the icons meaningful

Avoid using icons solely for visual interest. Make sure they'll be meaningful to the end user and have a purpose in the UI.

Minimal color usage

The icons come with standard color treatments. Should you choose to override the color by using a color class then make sure the color helps to convey a meaning.

Use standardized sizes

It is advisable to use standardized sizes for icons, based on where they are used. We suggest 16px for utility icons, 22px for navigational and 32px for features.

Utility: 16x16

Used to indicate an interaction inside a component such as a drop down menu or a date picker.

Way-finding iconography used to navigate UI elements such as dialog boxes or open\/close panels.

Feature & Object: 32x32

For use as visual anchors on Cards. As the largest icons they are intended to be used to indicate top level features.

Use icons

To add an icon use the at-carbon-icon element. As the icon attribute you can use one of the icons from the icon set below.

You can change the color of your icon by adding a color class.

You could further change the size of your icon by adding inline styling.

Icon set

now:about
now:about-filled
now:administration
now:alert
now:ambulance
now:announcement
now:app
now:arrow-down
now:arrow-left
now:arrow-right
now:arrow-up
now:assistant
now:audio
now:birthday
now:blank
now:bold
now:calendar
now:cancel
now:cards
now:caret-down
now:caret-left
now:caret-right
now:caret-up
now:chart
now:chart-bar
now:chart-doughnut
now:chart-line
now:chart-pie
now:chart-pill
now:checkbox
now:checklist
now:checkmark
now:clock
now:code
now:collapse
now:component
now:contact
now:create-new
now:database
now:delete
now:device-laptop
now:device-phone
now:devices
now:device-tablet
now:directions
now:document
now:download
now:edit
now:end
now:error
now:error-filled
now:excel
now:exchange
now:exit
now:expand
now:faq
now:file
now:filter
now:flash
now:folder
now:form
now:gear
now:generic-text
now:group
now:hash
now:heading
now:help
now:home
now:html
now:html-file
now:image-file
now:inbox
now:info
now:info-filled
now:invoice
now:italic
now:key
now:line-horizontal
now:link
now:list-bullets
now:list-numbered
now:manual
now:map
now:markdown
now:marker
now:menu
now:menu2
now:message
now:micro
now:minus
now:minus-filled
now:more
now:msaccess
now:msproject
now:number
now:onenote
now:password
now:pdf
now:phone
now:picture
now:pin
now:plane
now:play
now:plus
now:plus-filled
now:powerpoint
now:question
now:questions
now:quote
now:redo
now:restart
now:rewind
now:rss
now:search
now:server-cloud
now:share
now:sharepoint
now:shopping-basket
now:sort-down
now:sort-up
now:source-code
now:star
now:star-filled
now:start
now:tag
now:thumb-down
now:thumb-up
now:toggle
now:trash
now:undo
now:unpin
now:upload
now:user
now:users
now:video
now:video-call
now:visible
now:warning
now:warning-filled
now:weather
now:word
now:wrench

Last updated: Thu 12 Oct, 2017