6 Icons

Icons are used throughout the UI to save space, allow for visual clarity and focus, and for fun. Icons can be used adaptively if desired, but at this point they are used more as visual elements within other components.

The icons are available when you reference the Techné CSS file. Use a <span> or <i> element with the generic class "hyicon" together with the "hyicon-ICON-NAME" classes bellow.

These icons are only used by Techne components and patterns. If you need more icons we recommend to use the Bootstrap Glyphicons library.

Each icon is shown in it's recommended color. The Color Red is for actions like delete or remove, Blue is for main actions such as: new, add, create, check, navigate, etc. Color of the icon can be ovrewritten with CSS.

6.1 Avialable Icons

.hyicon-add
.hyicon-arrow
.hyicon-back
.hyicon-checked
.hyicon-chevron
.hyicon-close
.hyicon-dragdrop
.hyicon-expand
.hyicon-collapse
.hyicon-localization
.hyicon-grid
.hyicon-list
.hyicon-more
.hyicon-remove
.hyicon-search
.hyicon-top
.hyicon-helpoff
.hyicon-helpon
.hyicon-filter
.hyicon-filterremove
.hyicon-sort
.hyicon-addlg
.hyicon-combinedview
.hyicon-customize
.hyicon-info
.hyicon-library
.hyicon-restrictions
.hyicon-sync
.hyicon-caution
.hyicon-done
.hyicon-delete
.hyicon-change
.hyicon-checkedlg
.hyicon-dragdroplg
.hyicon-edit
.hyicon-linked
.hyicon-noimage
.hyicon-options
.hyicon-removelg
.hyicon-visibilityoff
.hyicon-visibilityon
.hyicon-warning
.hyicon-gethelp
.hyicon-infoon
.hyicon-lock
.hyicon-clone
.hyicon-duplicate
.hyicon-maximize
.hyicon-minimize
.hyicon-msgdanger
.hyicon-msginfo
.hyicon-msgsuccess
.hyicon-msgwarning
.hyicon-commerce
.hyicon-commercelg
.hyicon-unpowered
.hyicon-optionssm
.hyicon-globe
.hyicon-unlinked
<span class="hyicon {$modifiers}"></span>