# Icons

Design-system provides range of icons. Icons are svg's and can be used with <hy-icon /> element. To use an icon you need to specify which icon to use for example: <hy-icon icon="hy-icon-arrow-down" /> Icon also can take size or fill attribute, value is given in pixels, for example: <hy-icon icon="hy-icon-arrow-down" size="24" fill="#0e688b"/>.

# Usage

// hy-box only for demo purposes. Not needed to use icons.
<hy-box p="1" >
  <hy-icon icon="hy-icon-arrow-down" size=24 fill="#0e688b"/>
</hy-box>
<hy-box p="1" >
  <hy-icon icon="hy-icon-arrow-down" fill="var(--brand-main-bright)"/>
</hy-box>

# List of icons available

'hy-icon-add-todo'

'hy-icon-alert'

'hy-icon-archive'

'hy-icon-arrow-down'

'hy-icon-arrow-left'

'hy-icon-arrow-right'

'hy-icon-arrow-to-right'

'hy-icon-arrow-up'

'hy-icon-avatar-group'

'hy-icon-avatar'

'hy-icon-bachelor'

'hy-icon-bullet-list'

'hy-icon-camera'

'hy-icon-caret-down'

'hy-icon-caret-left'

'hy-icon-caret-right'

'hy-icon-caret-up'

'hy-icon-chat'

'hy-icon-code-fork'

'hy-icon-cogs'

'hy-icon-content-link'

'hy-icon-custom-link'

'hy-icon-date'

'hy-icon-discover'

'hy-icon-done'

'hy-icon-dot'

'hy-icon-dot-arrow-right'

'hy-icon-download'

'hy-icon-drag'

'hy-icon-drag-button'

'hy-icon-drop-down'

'hy-icon-edit'

'hy-icon-edit-event'

'hy-icon-embed'

'hy-icon-euro'

'hy-icon-events'

'hy-icon-external-link'

'hy-icon-eyelash'

'hy-icon-facebook'

'hy-icon-favorites'

'hy-icon-feed'

'hy-icon-file-text'

'hy-icon-fullscreen'

'hy-icon-globe'

'hy-icon-googleplus'

'hy-icon-grid'

'hy-icon-hamburger'

'hy-icon-heart'

'hy-icon-heart-support'

'hy-icon-helsingin-yliopisto'

'hy-icon-home'

'hy-icon-horizontal-resize'

'hy-icon-hy-logo'

'hy-icon-id-number'

'hy-icon-image'

'hy-icon-image-gallery'

'hy-icon-images'

'hy-icon-info'

'hy-icon-info-stroke'

'hy-icon-instagram'

'hy-icon-leiki-list'

'hy-icon-link-arrow'

'hy-icon-link-arrow-down'

'hy-icon-link-arrow-left'

'hy-icon-link-arrow-offsite'

'hy-icon-link-arrow-up'

'hy-icon-linkedin'

'hy-icon-list'

'hy-icon-list-of-links'

'hy-icon-list-as-blocks'

'hy-icon-list-style-grid'

'hy-icon-list-style-list'

'hy-icon-link'

'hy-icon-location'

'hy-icon-log'

'hy-icon-log-in'

'hy-icon-log-out'

'hy-icon-magnify-minus'

'hy-icon-magnify-plus'

'hy-icon-email'

'hy-icon-master'

'hy-icon-minus'

'hy-icon-modify'

'hy-icon-navi-triangle'

'hy-icon-new-group'

'hy-icon-new-person'

'hy-icon-notification'

'hy-icon-opinder-logo'

'hy-icon-pdf'

'hy-icon-people'

'hy-icon-permission-all'

'hy-icon-permission-group'

'hy-icon-permission-private'

'hy-icon-person'

'hy-icon-person-outline'

'hy-icon-phone'

'hy-icon-play'

'hy-icon-plus'

'hy-icon-preview'

'hy-icon-profile'

'hy-icon-question'

'hy-icon-remove'

'hy-icon-retweet'

'hy-icon-rotate-left'

'hy-icon-rotate-right'

'hy-icon-search'

'hy-icon-share'

'hy-icon-slim-hamburger-menu'

'hy-icon-social-media'

'hy-icon-some-facebook'

'hy-icon-some-instagram'

'hy-icon-some-linkedin'

'hy-icon-some-twitter'

'hy-icon-some-twitter-retweet'

'hy-icon-some-twitter-like'

'hy-icon-some-youtube'

'hy-icon-spinner'

'hy-icon-square'

'hy-icon-square-checked'

'hy-icon-time'

'hy-icon-todolist'

'hy-icon-tour'

'hy-icon-twitter'

'hy-icon-units-and-faculties'

'hy-icon-video'

'hy-icon-warning'

'hy-icon-wrench'

'hy-icon-quote'

'hy-icon-youtube'

# Properties

Property	Attribute	Type	Default
`fill`	`fill`	`string`	`'black'`
`icon`	`icon`	`string`	`undefined`
`size`	`size`	`number`	`20`

← Hero Image →