Icon Font Library
The CaGov icon font includes 225 icons you can use in your site. Four different formats of the font are included for compatibility with all popular browsers. You may need to add a mime map to your webserver for the WOFF font. To determine if your webserver needs it, upload the /fonts/CaGov.woff file to your webserver. Try downloading the WOFF in your browser by visiting: http://yourwebsite.ca.gov/fonts/CaGov.woff . If it prompts you to download the font, your server is configured correctly. If you get a 404 or other error, you'll need to add a mime map for extension ".woff", and the mimetype is "application/font-woff". Ask your server admin if you need assistance.
ca-gov-icon-logo
ca-gov-icon-home
ca-gov-icon-menu
ca-gov-icon-apps
ca-gov-icon-search
ca-gov-icon-chat
ca-gov-icon-capitol
ca-gov-icon-state
ca-gov-icon-phone
ca-gov-icon-email
ca-gov-icon-contact-us
ca-gov-icon-calendar
ca-gov-icon-bear
ca-gov-icon-chat-bubble
ca-gov-icon-info-bubble
ca-gov-icon-share-button
ca-gov-icon-share-facebook
ca-gov-icon-share-email
ca-gov-icon-share-flickr
ca-gov-icon-share-twitter
ca-gov-icon-share-linkedin
ca-gov-icon-share-googleplus
ca-gov-icon-share-instagram
ca-gov-icon-share-pinterest
ca-gov-icon-share-vimeo
ca-gov-icon-share-youtube
ca-gov-icon-law-enforcement
ca-gov-icon-justice-legal
ca-gov-icon-at-sign
ca-gov-icon-attachment
ca-gov-icon-zipped-file
ca-gov-icon-powerpoint
ca-gov-icon-excel
ca-gov-icon-word
ca-gov-icon-pdf
ca-gov-icon-share
ca-gov-icon-facebook
ca-gov-icon-linkedin
ca-gov-icon-youtube
ca-gov-icon-twitter
ca-gov-icon-pinterest
ca-gov-icon-vimeo
ca-gov-icon-instagram
ca-gov-icon-flickr
ca-gov-icon-google-plus
ca-gov-icon-microsoft
ca-gov-icon-apple
ca-gov-icon-android
ca-gov-icon-computer
ca-gov-icon-tablet
ca-gov-icon-smartphone
ca-gov-icon-roadways
ca-gov-icon-travel-car
ca-gov-icon-travel-air
ca-gov-icon-truck-delivery
ca-gov-icon-construction
ca-gov-icon-bar-chart
ca-gov-icon-pie-chart
ca-gov-icon-graph
ca-gov-icon-server
ca-gov-icon-download
ca-gov-icon-cloud-download
ca-gov-icon-cloud-upload
ca-gov-icon-shield
ca-gov-icon-fire
ca-gov-icon-binoculars
ca-gov-icon-compass
ca-gov-icon-sos
ca-gov-icon-shopping-cart
ca-gov-icon-video-camera
ca-gov-icon-camera
ca-gov-icon-green
ca-gov-icon-loud-speaker
ca-gov-icon-audio
ca-gov-icon-print
ca-gov-icon-medical
ca-gov-icon-zoom-out
ca-gov-icon-zoom-in
ca-gov-icon-important
ca-gov-icon-chat-bubbles
ca-gov-icon-call
ca-gov-icon-people
ca-gov-icon-person
ca-gov-icon-user-id
ca-gov-icon-payment-card
ca-gov-icon-skip-backwards
ca-gov-icon-play
ca-gov-icon-pause
ca-gov-icon-skip-forward
ca-gov-icon-mail
ca-gov-icon-image
ca-gov-icon-house
ca-gov-icon-gear
ca-gov-icon-tool
ca-gov-icon-time
ca-gov-icon-cal
ca-gov-icon-check-list
ca-gov-icon-document
ca-gov-icon-clipboard
ca-gov-icon-page
ca-gov-icon-read-book
ca-gov-icon-cc-copyright
ca-gov-icon-ca-capitol
ca-gov-icon-ca-state
ca-gov-icon-favorite
ca-gov-icon-rss
ca-gov-icon-road-pin
ca-gov-icon-online-services
ca-gov-icon-link
ca-gov-icon-magnify-glass
ca-gov-icon-key
ca-gov-icon-lock
ca-gov-icon-info
ca-gov-icon-arrow-up
ca-gov-icon-arrow-down
ca-gov-icon-arrow-left
ca-gov-icon-arrow-right
ca-gov-icon-carousel-prev
ca-gov-icon-carousel-next
ca-gov-icon-arrow-prev
ca-gov-icon-arrow-next
ca-gov-icon-menu-toggle-closed
ca-gov-icon-menu-toggle-open
ca-gov-icon-carousel-play
ca-gov-icon-carousel-pause
ca-gov-icon-search-right
ca-gov-icon-graduate
ca-gov-icon-briefcase
ca-gov-icon-images
ca-gov-icon-gears
ca-gov-icon-tools
ca-gov-icon-pencil
ca-gov-icon-pencil-edit
ca-gov-icon-science
ca-gov-icon-film
ca-gov-icon-table
ca-gov-icon-flowchart
ca-gov-icon-building
ca-gov-icon-searching
ca-gov-icon-wallet
ca-gov-icon-tags
ca-gov-icon-currency
ca-gov-icon-idea
ca-gov-icon-lightbulb
ca-gov-icon-calculator
ca-gov-icon-drive
ca-gov-icon-globe
ca-gov-icon-hourglass
ca-gov-icon-mic
ca-gov-icon-volume
ca-gov-icon-music
ca-gov-icon-folder
ca-gov-icon-grid
ca-gov-icon-archive
ca-gov-icon-contacts
ca-gov-icon-book
ca-gov-icon-drawer
ca-gov-icon-map
ca-gov-icon-pushpin
ca-gov-icon-location
ca-gov-icon-quote-fill
ca-gov-icon-question-fill
ca-gov-icon-warning-triangle
ca-gov-icon-warning-fill
ca-gov-icon-check-fill
ca-gov-icon-close-fill
ca-gov-icon-plus-fill
ca-gov-icon-minus-fill
ca-gov-icon-caret-fill-right
ca-gov-icon-caret-fill-left
ca-gov-icon-caret-fill-down
ca-gov-icon-caret-fill-up
ca-gov-icon-caret-fill-two-right
ca-gov-icon-caret-fill-two-left
ca-gov-icon-caret-fill-two-down
ca-gov-icon-caret-fill-two-up
ca-gov-icon-arrow-fill-right
ca-gov-icon-arrow-fill-left
ca-gov-icon-arrow-fill-down
ca-gov-icon-arrow-fill-up
ca-gov-icon-arrow-fill-left-down
ca-gov-icon-arrow-fill-right-down
ca-gov-icon-arrow-fill-right-up
ca-gov-icon-arrow-fill-left-up
ca-gov-icon-triangle-line-right
ca-gov-icon-triangle-line-left
ca-gov-icon-triangle-line-up
ca-gov-icon-triangle-line-down
ca-gov-icon-caret-line-two-right
ca-gov-icon-caret-line-two-left
ca-gov-icon-caret-line-two-down
ca-gov-icon-caret-line-two-up
ca-gov-icon-caret-line-right
ca-gov-icon-caret-line-left
ca-gov-icon-caret-line-up
ca-gov-icon-caret-line-down
ca-gov-icon-important-line
ca-gov-icon-info-line
ca-gov-icon-check-line
ca-gov-icon-question-line
ca-gov-icon-close-line
ca-gov-icon-plus-line
ca-gov-icon-minus-line
ca-gov-icon-question
ca-gov-icon-minus-mark
ca-gov-icon-plus-mark
ca-gov-icon-collapse
ca-gov-icon-expand
ca-gov-icon-check-mark
ca-gov-icon-close-mark
ca-gov-icon-triangle-right
ca-gov-icon-triangle-left
ca-gov-icon-triangle-down
ca-gov-icon-triangle-up
ca-gov-icon-caret-two-right
ca-gov-icon-caret-two-left
ca-gov-icon-caret-two-down
ca-gov-icon-caret-two-up
ca-gov-icon-caret-right
ca-gov-icon-caret-left
ca-gov-icon-caret-up
ca-gov-icon-caret-down
ca-gov-icon-filter
To insert an icon into your page, insert an empty span tag with the class name for the icon you wish to use, for example:
<h2><span class="ca-gov-icon-arrow-down"></span> Heading</h2>
will appear as:
Heading
When icons are used with H1 to H5 headings and some pre-configured modules, styles for font-size and color are included. When used anywhere else you'll need to add styles for the font-size and color yourself. Icon fonts can be styled using the same css rules used to style any other text on the page. For example color: and font-size: chnage the color and size of the icon.