Icon usage

Basic icon

Icons can be used by applying the cicon class name on a <span> tag.


<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>

Icon sizes

For brand alignment with Creative Services, there are 2 sizes available for icons.

Icons should not be set larger than 32px × 32px, as the icon fonts have been designed and developed to accomodate up to this size.

Icon fonts have been designed with a solid fill; while larger illustrations have been designed with an outlined style. See the SVG image list and SVG image usage pages for information on how to display the larger outline illustrative images designed by Creative Services.

Default size: 16px × 16px
Class: Not applicable

Large size: 32px × 32px
Class: cicon-lg


<!-- Default: 16px × 16px -->
<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>

<!-- Large: 32px × 32px -->
<span class="{{ Icon class (e.g. cicon-home) }} cicon-lg" aria-hidden="true"></span>

Icon with label

Select a layout to view:

Display icon:

City parking

Code


<!--Icon with label - standard-->
<p class="cui icon-label cui-width-100 {{ hide-icon | hide-label }}">
    <!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->
    <span class="cui {{ Icon class (e.g. cicon-home) }} {{ cicon-lg }}" aria-hidden="true"></span>
    <span class="icon-descript">{{ Label }}</span>
</p>

<!--Icon with label - group details-->
<p class="cui icon-label-group  {{ hide-icon }}">
	<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
	<span class="icon-descript">
		<span class="label {{ sr-only }}">{{ Label }}</span>
		<span class="detail">{{ Details }}</span>
	</span>
</p>

Text link with icon

The icon may be placed to the left or the right of the link text.

Example link to a pdf file

Example external link

Code


<!-- Left -->
<a href="{{ URL }}" class="cui icon-link-text">
    <span class="{{ Icon class (e.g. cicon-file-pdf-o) }} left" aria-hidden="true"></span><span class="link-text">{{ Link text }}</span>
</a>

<!-- Right -->
<a href="{{ URL }}" class="cui icon-link-text" target="_blank">
    <span class="link-text">{{ Link text }}</span><span class="{{ Icon class (e.g. cicon-external-link) }} right" aria-hidden="true"></span>
</a>

Map icons

The icons below are intended to be used on maps.

Font size 16px × 16px

Font size 32px × 32px

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<span class="cicon-stack mapicon cl" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-golf-course"></i>
    <i class="cicon-map-square-o"></i>
</span>

Calendar Event

Event: Arts and Culture

Event: Festival

Event: Recreation

Event: Health

Event: Home Business

Event: Important

Event: Environment

Event: Education

Event: Engagement

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Arts and Culture, Festival, Recreation, Health, Home Business, Important, Enviroment, Education, Engagement -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-calendar-event {{ art | festival | recreation | health | home-business | important | environment | education | engagement }}"></i>
    <i class="cicon-map-square-o"></i>
</span>

Cemeteries

Cemetery

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Cemetary -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-cemetery"></i>
    <i class="cicon-map-square-o"></i>
</span>

City Visitors

Attraction

Visitor Info

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Attraction -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square atraction"></i>
    <i class="cicon-atraction"></i>
</span>

<!-- Visitor Info -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square visitor-info"></i>
    <i class="cicon-visitor-info"></i>
</span>

Community

Community Line

Community Line S

Community Centre

Social Dev Centre

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Community Line -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-community-line"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Community Line S -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-community-line-s"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Community Center -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square community-center"></i>
    <i class="cicon-community-center"></i>
</span>

<!-- Social Dev Centre -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square social-dev-centre"></i>
    <i class="cicon-social-dev-centre"></i>
</span>

Community Investment Fund

Civic Partners Development

Community Associations and Social Recreation Groups

Community Safety

New Central Library

Park Development

Recreation Development

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Community Investment Fund icons: Civic Partners Development,
     Community Associations and Social Recreation Groups, Community Safety,
     New Central Library, Park Development, Recreation Development -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square comm-investment"></i>
    <i class="{{ cicon-civic-partners-development | cicon-casg | cicon-community-safety | cicon-new-central-library | cicon-park-development | cicon-recreation-development }}"></i>
</span>

Education and Libraries

After School Program

Library

Post Secondary

Private School

Public School

Separate School

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- After School Program -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square after-school-program"></i>
    <i class="cicon-after-school-program"></i>
</span>

<!-- Library -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square library"></i>
    <i class="cicon-library"></i>
</span>

<!-- Post Secondary -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-post-secondary"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Private School -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-school private">
		<i class="cicon-al-p"></i>
		<i class="cicon-al-r"></i>
	</i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Public School -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
	<i class="cicon-school public">
		<i class="cicon-al-p"></i>
		<i class="cicon-al-u"></i>
	</i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Separate School -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
	<i class="cicon-school separate">
		<i class="cicon-al-s"></i>
		<i class="cicon-al-e"></i>
	</i>
    <i class="cicon-map-square-o"></i>
</span>

Government

Court

Map line police district

Map line police zone

Map line thin quadrant

Ward line

Ward line s

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Court -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square court"></i>
    <i class="cicon-court"></i>
</span>

<!-- Map line police district -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-map-line police-district"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Map line police zone -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-map-line police-zone"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Map line thin quadrant -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-map-line-thin quadrant"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Ward line -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-ward-line"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Ward line s -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-ward-line-s"></i>
    <i class="cicon-map-square-o"></i>
</span>

Health & Public Safety

EMS Station

Fire Station

Hospital

Police Service

Camera Intersection Safety

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- EMS Station -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-ems-station"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Fire Station -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-fire-stn"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Hospital -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square hospital"></i>
    <i class="cicon-al-h"></i>
</span>

<!-- Police Service -->
 <span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-police-service"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Camera Intersection Safety -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-traffic-camera safety"></i>
    <i class="cicon-map-square-o"></i>
</span>

Historic Buildings

Historic Resource

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Historic Resource -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-historic-resource"></i>
    <i class="cicon-map-square-o"></i>
</span>

Land Use and Development

Development Permit

Development Permit Public Notices

Building Permit

LOC

Lot Dimension

Lot Easement

Development Permit (pointer)

Development Permit Public Notices (pointer)

Building Permit (pointer)

LOC (pointer)

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Development Permit, Development Permit Public Notices, Building Permit, LOC,
     Lot Dimension, LOT easement, Development Permit (pointer), Development Permit
     Public Notices (pointer), Building permit (pointer), LOC (pointer) -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="{{ cicon-development-permit | cicon-dp-public-notices | cicon-building-permit | cicon-loc | cicon-lot-dimension | cicon-lot-easement | cicon-development-permit | cicon-dp-public-notices | cicon-building-permit | cicon-loc }}"></i>
    <i class="cicon-map-square-o"></i>
</span>

Pets

Offleash dog

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Offleash dog -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-offleash-dog"></i>
    <i class="cicon-map-square-o"></i>
</span>

Recreation

Arena

Art Centre

Leisure Centre

Athletic Park

City Park

Golf Course

Skate Park

Indoor Pool

Outdoor Pool

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Arena -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square arena"></i>
    <i class="cicon-arena"></i>
</span>

<!-- Art Centre -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square art-centre"></i>
    <i class="cicon-art-centre"></i>
</span>

<!-- Leisure Centre -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square leisure-centre"></i>
    <i class="cicon-leisure-centre"></i>
</span>

<!-- Athletic Park -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-al-a athletic-park"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- City Park, Golf Course, Skate Park -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="{{ cicon-city-park | cicon-golf-course | cicon-skate-park }}"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Indoor Pool and Outdoor Pool -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="{{ cicon-indoor-pool | cicon-outdoor-pool }}"></i>
    <i class="cicon-map-square-o"></i>
</span>

Transportation

CTrain Station

Green Line Station

Green Line Underground Station

Green Line Proposed

City Parking

Construction Detours

Construction

Camera Traffic

Incidents

Road/Lane closure

Plow / Sander

Bus Route

Sweep Route Completed

Sweep route scheduled

Sweep Parking Ban

Snow route parking ban

Snow Route Temporary No Parking

SNIC Route Priority 1

SNIC Route Priority 2

SNIC Snow Route Exemption

Residential Parking Polygon

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Ctrain Station -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square ctrain-stn"></i>
    <i class="cicon-train"></i>
</span>

<!-- Green-line Station -->
<span class="cui cicon-lg cicon-stack mapicon cl" aria-hidden="true">
	<i class="cicon-map-square"></i>
    <i class="cicon-circle coc-secondary-green"></i>
    <i class="cicon-gl-station"></i>
   	<i class="cicon-map-square-o"></i>
</span>

<!-- Green-line Underground Station -->
<span class="cui cicon-lg cicon-stack mapicon cl" aria-hidden="true">
   <i class="cicon-map-square"></i>
   <i class="cicon-circle coc-secondary-green"></i>
   <i class="cicon-gl-stn-underground"></i>
   <i class="cicon-map-square-o"></i>
</span>

<!-- Green-line Station Proposed -->
<span class="cui cicon-lg cicon-stack mapicon cl" aria-hidden="true">
	<i class="cicon-map-square"></i>
    <i class="cicon-circle coc-secondary-2L"></i>
    <i class="cicon-gl-station"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- City Parking -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-circle-l-x-thin city-parking"></i>
    <i class="cicon-circle-l city-parking"></i>
    <i class="cicon-al-p city-parking"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Construction Detours -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-construction-detours-base"></i>
    <i class="cicon-construction-detours"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Construction -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-construction-base"></i>
    <i class="cicon-construction"></i>
</span>

<!-- Camera Traffic -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-traffic-camera traffic"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Incidents -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-incidents"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Road/Lane closure-->
<span class="cui cicon-lg cicon-stack mapicon cl" aria-hidden="true">
    <i class="cicon-minus-circle coc-secondary-red"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!--Plow / Sander-->
<span class="cui cicon-lg cicon-stack mapicon cl-ba" aria-hidden="true">
	<i class="cicon-map-square plow-sander"></i>
	<i class="cicon-plow-sander"></i>
	<i class="map-square-o"></i>
</span>

<!-- Bus Route -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-map-line-thin bus-route"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Sweep Route Completed -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-map-line-thin sweep-route-completed"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Sweep Route Scheduled -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-map-dot-line sweep-route-scheduled"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Sweep Parking Ban, Snow Route Parking Ban, Snow Route Temporary No Parking, SNIC Route Priority 1, SNIC Route Priority 2, SNIC Snow Route Exemption -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-map-line {{ sweep-parking-ban | snow-route-parking-ban | snow-route-temp-no-parking | snic-route-priority1 | snic-route-priority2 | snic-snow-route-exemption }}"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Residential Parking Polygon -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-residential-parking-polygon"></i>
    <i class="cicon-map-square-o"></i>
</span>

Waste and Recycling

Holiday tree drop off

Electronics recycling

landfill

Haz drop off

Leaf drop off

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Holiday Tree Drop Off, Landfill, Hazardous Waste Drop Off, Leaf Drop Off -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square waste-recycling"></i>
    <i class="{{ cicon-holiday-tree-drop-off | cicon-landfill | cicon-haz-drop-off | cicon-leaf-drop-off }}"></i>
</span>

<!-- Electronics Recycling -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-electronics-recycling"></i>
    <i class="cicon-map-square-o"></i>
</span>

Others

Bus Stop

BRT Stop

Park & Ride Lot

Bikeway Line

CTrain Line

Bike Closure Current

Bike Closure Future

Bike Park and Ride

Cycle Lane

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Bus Stop -->
<span class="cui cicon-stack mapicon cl-ba {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square bus-stop"></i>
    <i class="cicon-bus"></i>
</span>

<!-- BRT Stop -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-brt-stop"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Park Ride Lot -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-al-p park-ride-lot"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Bikeway Line -->
<span class=" cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-bikeway-line"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- CTrain Line -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
    <i class="cicon-map-square"></i>
    <i class="cicon-ctrain-lines-base"></i>
    <i class="cicon-ctrain-lines"></i>
    <i class="cicon-map-square-o"></i>
</span>

<!-- Bike Closure Current -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
	<i class="cicon-map-square"></i>
		<i class="cicon-circle coc-secondary-yellow-D"></i>
	<i class="cicon-bike-closure"></i>
	<i class="cicon-map-square-o"></i>
</span>

<!-- Bike Closure Future -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
	<i class="cicon-map-square"></i>
	<i class="cicon-circle coc-secondary-3L"></i>
	<i class="cicon-bike-closure"></i>
	<i class="cicon-map-square-o"></i>
</span>

<!-- Bike Park and Ride -->
<span class="cui cicon-stack mapicon cl {{ cicon-lg }}" aria-hidden="true">
	<i class="cicon-map-square black"></i>
	<i class="cicon-park-ride"></i>
	<i class="cicon-map-square-o"></i>
</span>

<!-- Cycle Lane -->
<span class="cui cicon-lg cicon-stack mapicon cl" aria-hidden="true">
	<i class="cicon-minus-thin-border cycle-lane-border"></i>
	<i class="cicon-minus-thin cycle-lane"></i>
</span>

Accessibility icons

The accessibility symbols are based on universal symbols and designed with Creative Services so they are inline with the City of Calgary brand. Check the guidelines on MyCity.

The minimum icon size for accessibility icons is 32px.

The background colour for accessibility icons should always be #005589 blue or rgb(0,85,137). No other background colour should be used.

Large text

Mobility

Open Captioning

Seeing eye dog

Sign language

Teletypewriter

Vision loss

White cane

Assisted listening

Braille

Closed captioning

Cognitive disability

Communication access

FM infrared system

Hard of hearing

Code


<!-- Large text -->
<span class="cui cicon-lg access-icon cicon-large-text-sq" aria-hidden="true"></span>

<!-- Mobility -->
<span class="cui cicon-lg access-icon cicon-mobility-sq" aria-hidden="true"></span>

<!-- Open Captioning -->
<span class="cui cicon-lg access-icon cicon-open-captioning-sq" aria-hidden="true"></span>

<!-- Seeing eye dog -->
<span class="cui cicon-lg access-icon cicon-seeing-eye-dog-sq" aria-hidden="true"></span>

<!-- Sign language -->
<span class="cui cicon-lg access-icon cicon-sign-language-sq" aria-hidden="true"></span>

<!-- Teletypewriter -->
<span class="cui cicon-lg access-icon cicon-teletypewriter-sq" aria-hidden="true"></span>

<!-- Vision loss -->
<span class="cui cicon-lg access-icon cicon-vision-loss-sq" aria-hidden="true"></span>

<!-- White cane -->
<span class="cui cicon-lg access-icon cicon-white-cane-sq" aria-hidden="true"></span>

<!-- Assisted listening -->
<span class="cui cicon-lg access-icon cicon-assisted-listening-sq" aria-hidden="true"></span>

<!-- Braille -->
<span class="cui cicon-lg access-icon cicon-braille-sq" aria-hidden="true"></span>

<!-- Closed captioning -->
<span class="cui cicon-lg access-icon cicon-closed-captioning-sq" aria-hidden="true"></span>

<!-- Cognitive disability -->
<span class="cui cicon-lg access-icon cicon-cognitive-disability-sq" aria-hidden="true"></span>

<!-- Communication access -->
<span class="cui cicon-lg access-icon cicon-communication-access-sq" aria-hidden="true"></span>

<!-- FM infrared system -->
<span class="cui cicon-lg access-icon cicon-FM-Infrared-system-sq" aria-hidden="true"></span>

<!-- Hard of hearing -->
<span class="cui cicon-lg access-icon cicon-hard-of-hearing-sq" aria-hidden="true"></span>

Brand icons

Facebook

Twitter

Instagram

Youtube

Google plus

Tumblr

Vine

Vimeo

Drupal

Skype

Wordpress

Disqus

Code


<!-- The default icon size is 16px × 16px. Use the class `cicon-lg` to make the icon size 32px × 32px -->

<!-- Facebook -->
<span class="cui cl cicon-facebook {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Facebook -->
<span class="cui cl cicon-facebook-official {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Facebook -->
<span class="cui cl cicon-facebook-square {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Facebook -->
<span class="cui cl cicon-facebook-circle {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Twitter -->
<span class="cui cl cicon-twitter {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Twitter -->
<span class="cui cl cicon-twitter-square {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Twitter -->
<span class="cui cl cicon-twitter-circle {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Linkedin -->
<span class="cui cl cicon-linkedin {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Linkedin -->
<span class="cui cl cicon-linkedin-square {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Linkedin -->
<span class="cui cl cicon-linkedin-circle {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Instagram -->
<span class="cui cl cicon-instagram {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Youtube -->
<span class="cui cl cicon-youtube {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Youtube -->
<span class="cui cl cicon-youtube-square {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Youtube -->
<span class="cui cl cicon-youtube-circle {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Google plus -->
<span class="cui cl cicon-google-plus {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Google plus -->
<span class="cui cl cicon-google-plus-circle {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Google plus -->
<span class="cui cl cicon-google-plus-square {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Tumblr -->
<span class="cui cl cicon-tumblr {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Tumblr -->
<span class="cui cl cicon-tumblr-square {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Tumblr -->
<span class="cui cl cicon-tumblr-circle {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Pinterest -->
<span class="cui cl cicon-pinterest-p {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Pinterest -->
<span class="cui cl cicon-pinterest-square {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Pinterest -->
<span class="cui cl cicon-pinterest {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Vine -->
<span class="cui cl cicon-vine {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Vimeo -->
<span class="cui cl cicon-vimeo-square {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Drupal -->
<span class="cui cl cicon-drupal {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Skype -->
<span class="cui cl cicon-skype {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Wordpress -->
<span class="cui cl cicon-wordpress {{ cicon-lg }}" aria-hidden="true"></span>

<!-- Disqus -->
<span class="cui cl cicon-disqus-circle {{ cicon-lg }}" aria-hidden="true"></span>