Icon Sets

Calcite Web comes with two separate icon sets. One is social icons which include a particular presentational style. The other is the Calcite Web interface icon set.

User Interface Icons

Calcite Web's interface icon set is available both as an icon font and as inline SVG files.

If you're using the icon font, just add the class icon-ui-{name} to an element. If you're using inline SVG, just copy and paste the SVG code into your project.

Icons have padding built into them so they can sit alongside text, to remove this padding, use the icon-ui-flush class.

UI Icon Colors

If you've added your icons as inline <svg> elements, you can add the following classes to change the fill color of the svg.

svg-icon-light-blue

svg-icon-blue

svg-icon-dark-blue

svg-icon-green

svg-icon-yellow

svg-icon-purple

svg-icon-orange

svg-icon-red

svg-icon-gray

Icon Font Colors

If you've included icons in your project with the icon font, a set of helper classes are available to simply change the color of an icon without affecting text within the same element.

icon-ui-green

icon-ui-light-blue

icon-ui-blue

icon-ui-dark-blue

icon-ui-purple

icon-ui-orange

icon-ui-gray

icon-ui-red

icon-ui-yellow

A set of social icons are provided as part of calcite-web. Just use the icon-social-X class on an element. It is suggested you add an aria-label to help the visually impaired understand what the element with the icon represents as they won't be able to see the Facebook logo, for example:

<span class="icon-social-facebook" aria-label="Facebook"></span>

Below are the current social icons. More sizes are planned. For now only 30x30 pixel square icons are available.

.icon-social-contact

.icon-social-facebook

.icon-social-geonet

.icon-social-github

.icon-social-google-plus

.icon-social-instagram

.icon-social-linkedin

.icon-social-pinterest

.icon-social-rss

.icon-social-share

.icon-social-twitter

.icon-social-youtube