Icon

Ready Added in 2.0.0

Place scalable vector icons anywhere in your content.

Gloss comes with its own SVG icon system and a comprehensive library, which comprises a growing number of elegant outline icons. This component injects SVGs into the site, so that they adopt color and can be styled with CSS.

Usage

Make sure to include the icon library script, for more details see the installation instructions.

<script src="gloss-source/dist/js/gloss-icons.min.js"></script>

To apply this component, add the gls-icon attribute to a <span> or <a> element. To display the actual icon, you need to append the icon: NAME parameter to the attribute. Et voilà, you have a vector icon which inherits color just like your text does.

<span gls-icon="icon: check"></span>

<a href="" gls-icon="icon: heart"></a>

If icon is the only option in the attribute value, you can also use gls-icon="NAME"

<span gls-icon="heart"></span>

  • <span class="gls-margin-small-right" gls-icon="check"></span>

<a href="" gls-icon="heart"></a>

Library

Here is an overview of all currently available icons. Over time, we will keep adding new icons to the list.

Note The four triangle arrows, and all brand icons are colored with fills instead of strokes.

Essentials

  • accepting-insurance
  • self-pay-discount
  • new-patients
  • doctor
  • calendar
  • clock
  • pharmacy
  • urgent
  • virtual

Anatomy

  • blood
  • bone
  • brain
  • eye
  • spine
  • skull
  • fertility
  • hand
  • head
  • heartcare
  • heart-valve
  • stomach
  • kidneys
  • liver
  • lungs
  • mental
  • neck
  • tooth

Medical

  • blood-pressure
  • briefcase
  • crutch
  • eyechart
  • flask
  • iv
  • labs
  • medical-chart
  • prescription
  • dna
  • virus
  • scale
  • stethoscope
  • syringe
  • thermometer
  • microscope

People

  • baby
  • kids
  • adults
  • family
  • male
  • female
  • man
  • woman
  • gender-men
  • gender-women

Locations

  • hospital
  • university
  • church

Transportation

  • airplane
  • ambulance
  • helicopter
  • car
  • trax
  • gurney
  • wheelchair

App

  • home
  • sign-in
  • sign-out
  • user
  • users
  • lock
  • unlock
  • settings
  • cog
  • comment
  • commenting
  • comments
  • hashtag
  • tag
  • cart
  • credit-card
  • mail
  • receiver
  • search
  • location
  • bookmark
  • thumbs-up
  • thumbs-down
  • code
  • paint-bucket
  • camera
  • video-camera
  • bell
  • microphone
  • star
  • heart
  • happy
  • lifesaver
  • gift
  • rss
  • social
  • world
  • calendar
  • clock
  • pencil
  • trash
  • move
  • link
  • translate
  • yes
  • no
  • question
  • info
  • warning
  • image
  • thumbnails
  • table
  • list
  • menu
  • grid
  • more
  • more-vertical
  • plus
  • plus-circle
  • minus
  • minus-circle
  • close
  • check
  • ban
  • refresh
  • play
  • play-circle

Devices

  • tv
  • desktop
  • laptop
  • tablet
  • phone
  • printer

Storage

  • file
  • file-text
  • file-pdf
  • copy
  • folder
  • album
  • push
  • pull
  • server
  • database
  • cloud-upload
  • cloud-download
  • download
  • upload

Direction

  • expand
  • shrink
  • arrow-up
  • arrow-down
  • arrow-left
  • arrow-right
  • chevron-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-double-left
  • chevron-double-right
  • triangle-up
  • triangle-down
  • triangle-left
  • triangle-right

Brands

  • facebook
  • flickr
  • gitlab
  • github
  • google
  • hmhi
  • huntsman
  • instagram
  • linkedin
  • moran
  • pinterest
  • reddit
  • tumblr
  • twitter
  • uhealth
  • vimeo
  • wordpress
  • youtube

Ratio

Add the ratio: 2 parameter to the gls-icon attribute to double its size – or any other number, depending on how big you want your icon to be.

<span gls-icon="icon: check; ratio: 2"></span>

  • <span class="gls-margin-small-right" gls-icon="icon: check; ratio: 2"></span>
<span gls-icon="icon: check; ratio: 3.5"></span>

To reset the default link styling to a more muted color when using an icon inside an anchor, add the .gls-icon-link class.

<a href="" class="gls-icon-link" gls-icon="heart"></a>

  • <a href="#" class="gls-icon-link gls-margin-small-right" gls-icon="copy"></a>
<a href="#" class="gls-icon-link gls-margin-small-right" gls-icon="pencil"></a>
<a href="#" class="gls-icon-link" gls-icon="trash"></a>

Button modifier

Use the modifier .gls-icon-button class on an <a> element to create an icon button, which can be used for social icons.

<a href="" class="gls-icon-button" gls-icon="twitter"></a>

  • <a href="" class="gls-icon-button gls-margin-small-right" gls-icon="twitter"></a>
<a href="" class="gls-icon-button  gls-margin-small-right" gls-icon="facebook"></a>
<a href="" class="gls-icon-button" gls-icon="pinterest"></a>

Image modifier

You can also make any background image scale to the size of an icon. Just add the .gls-icon-image class and a background image path.

  • <span class="gls-icon gls-icon-image" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/dark.jpg);"></span>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
icon String '' The icon to display.
ratio Number 1 The icon size ratio.

icon is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

<span gls-icon="heart"></span>

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.icon(element, options);

Properties

svg

A JavaScript Promise that will resolve with the added SVG Node.

Gloss.icon(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })