Icons is a popular icon toolkit that provides scalable vector icons and social logos.
The "icons" font-family is assigned to the pseudo elements
The site frameworks that support every website built on the GOSS platform include the GOSS font library, which is made up of a number of different icon libraries using Fontello (https://fontello.com/) to create our own collection.
When to use this component
Use font icon libraries when you want to add visual elements that help users navigate or perform actions quickly and easily. Icons are especially helpful for highlighting key actions, guiding users to the next step without overwhelming them with too much text.
It's generally best to use distinct icons for each primary action to keep things clear, avoiding repeated icons for different tasks, as this can lead to confusion. If you only need an icon for a minor detail, consider using a smaller, subtle icon style to keep it unobtrusive.
For situations where users need to make selections or toggle options, consider using icons combined with checkboxes, radio buttons, or toggle switches for clarity.
Icons can also work well as alternatives to text labels in cases where you want to add emphasis or maintain a clean, structured design.
Examples in GOSS products
- Button and CTA (call to action) link component to help users identify sections
- Assisted Service toolbar to explain sections without text
- Contact template to highlight email and number contact details
Accessibility considerations
Icons can enhance accessibility by providing quick, recognisable visual cues that help users understand actions and navigation options at a glance.
For users with cognitive disabilities or limited reading skills, icons can reinforce text and improve comprehension by associating familiar symbols with functions or categories.
When used with accessible labels and ARIA attributes, icons become readable by screen readers, making them inclusive for visually impaired users. Icons also help improve the overall user experience on mobile devices, where screen space is limited, by offering simple visual shortcuts that minimise the need for lengthy text.
Furthermore, by ensuring icons are consistently styled with adequate contrast, they remain distinguishable for users with colour vision deficiencies, supporting a wider range of accessibility needs.
Basic icon
An icon component on a paragraph element.
.classname::after{
content: "\f105";
}
Adding an icon with the ::after pseudo-element places it right after the text in a paragraph, giving it a nice visual touch without needing extra HTML. It's a handy way to add a bit of flair or emphasise something important, keeping things tidy and easy to manage.
Icon text
<p class="classname">Icon text</p>Additional icon styles
Span elements with additional classes to apply icons and specify their codes.
\e800 (search)
\e801 (down-dir)
\e802 (heart)
\e803 (heart-empty)
\e804 (star)
\e805 (star-empty)
\e806 (user)
\e807 (plus)
\e808 (minus)
\e809 (cancel)
\e80a (ok)
\e80b (camera)
\e80c (picture)
\e80d (video)
\e80e (home)
\e80f (link)
\e810 (lock)
\e811 (pin)
\e812 (download)
\e813 (upload)
\e814 (up-dir)
\e815 (left-dir)
\e816 (pencil)
\e817 (print)
\e818 (chat)
\e819 (location)
\e81a (folder-open)
\e81b (phone)
\e81c (cog)
\e81d (wrench)
\e81e (calendar)
\e81f (zoom-out)
\e820 (zoom-in)
\e821 (volume-up)
\e822 (volume-down)
\e823 (clock)
\e824 (down-circled2)
\e825 (up-circled2)
\e826 (left-open)
\e827 (right-open)
\e828 (down-open)
\e829 (up-open)
\e82a (up-big)
\e82b (right-big)
\e82c (left-big)
\e82d (down-big)
\e82e (stop)
\e82f (pause)
\e830 (play)
\e831 (award)
\e832 (globe)
\e833 (gift)
\e834 (credit-card)
\e835 (floppy)
\e836 (bell)
\e837 (plus-circled)
\e838 (minus-circled)
\e839 (info-circled)
\e83a (help-circled)
\e83b (attention)
\e83c (attention-circled)
\e83d (folder)
\e83e (right-dir)
\e83f (cancel-circled2)
\e840 (cancel-circled)
\e841 (ok-circled)
\e842 (ok-circled2)
\e843 (lock-open)
\e844 (comment)
\e845 (doc)
\e846 (ccw)
\e847 (play-circled2)
\e848 (eject)
\e849 (signal)
\e84a (th-list)
\e84b (th-large)
\e84c (th)
\e84d (users)
\e84e (tag)
\e84f (tags)
\e850 (flag)
\e851 (forward)
\e852 (basket)
\e853 (volume-off)
\e854 (headphones)
\e855 (to-end)
\e856 (to-end-alt)
\e857 (to-start)
\e858 (to-start-alt)
\e859 (fast-fw)
\e85a (fast-bw)
\e85b (flight)
\e85c (off)
\e85d (key)
\e85e (truck)
\e85f (layers)
\e860 (signal-1)
\e861 (target)
\e862 (library)
\e863 (glasses)
\e864 (trash-1)
\e865 (layers-alt)
\e866 (trash-3)
\e867 (trash-4)
\e868 (trash-empty)
\e869 (water)
\e86a (glass)
\e86b (megaphone)
\e86c (droplet)
\e86d (air)
\e86e (blind)
\e86f (guidedog)
\e870 (accessibility)
\e871 (hearing-impaired)
\e872 (road)
\e873 (resize-full)
\e874 (resize-small)
\e875 (resize-full-1)
\e876 (resize-small-1)
\e877 (code)
\f08e (link-ext)
\f099 (twitter)
\f09a (facebook)
\f09e (rss)
\f0b0 (filter)
\f0b2 (resize-full-alt)
\f0c9 (menu)
\f0d2 (pinterest-circled)
\f0d3 (pinterest-squared)
\f0d4 (gplus-squared)
\f0d5 (gplus)
\f0d6 (money)
\f0dc (sort)
\f0dd (sort-down)
\f0de (sort-up)
\f0e0 (mail-alt)
\f0e1 (linkedin)
\f0e8 (sitemap)
\f0eb (lightbulb)
\f0ed (download-cloud)
\f0ee (upload-cloud)
\f0f3 (bell-alt)
\f0f4 (coffee)
\f0f5 (food)
\f0f6 (doc-text)
\f0f8 (hospital)
\f0f9 (ambulance)
\f0fa (medkit)
\f0fc (beer)
\f0fd (h-sigh)
\f0fe (plus-squared)
\f104 (angle-left)
\f105 (angle-right)
\f106 (angle-up)
\f107 (angle-down)
\f108 (desktop)
\f109 (laptop)
\f10a (tablet)
\f10b (mobile)
\f10d (quote-left)
\f10e (quote-right)
\f112 (reply)
\f114 (folder-empty)
\f118 (smile)
\f119 (frown)
\f11a (meh)
\f120 (terminal)
\f123 (star-half-alt)
\f124 (direction)
\f128 (help)
\f129 (info)
\f12a (attention-alt)
\f130 (mic)
\f131 (mute)
\f133 (calendar-empty)
\f13d (anchor)
\f141 (ellipsis)
\f142 (ellipsis-vert)
\f143 (rss-squared)
\f144 (play-circled)
\f145 (ticket)
\f146 (minus-squared)
\f147 (minus-squared-alt)
\f148 (level-up)
\f149 (level-down)
\f14a (ok-squared)
\f154 (pound)
\f15b (doc-inv)
\f15c (doc-text-inv)
\f15d (sort-name-up)
\f15e (sort-name-down)
\f160 (sort-alt-up)
\f161 (sort-alt-down)
\f162 (sort-number-up)
\f163 (sort-number-down)
\f164 (thumbs-up-alt)
\f165 (thumbs-down-alt)
\f166 (youtube-squared)
\f167 (youtube)
\f16a (youtube-play)
\f173 (tumblr)
\f174 (tumblr-squared)
\f17e (skype)
\f18e (right-circled2)
\f190 (left-circled2)
\f196 (plus-squared-alt)
\f198 (slack)
\f19c (bank)
\f19d (graduation-cap)
\f1ad (building-filled)
\f1b0 (paw)
\f1b1 (spoon)
\f1b9 (cab)
\f1ba (taxi)
\f1bb (tree)
\f1bc (spotify)
\f1be (soundcloud)
\f1c1 (file-pdf)
\f1c2 (file-word)
\f1c3 (file-excel)
\f1c4 (file-powerpoint)
\f1c5 (file-image)
\f1c6 (file-audio)
\f1c7 (file-video)
\f1c8 (file-code)
\f1e0 (share)
\f1e1 (share-squared)
\f1e3 (soccer-ball)
\f1eb (wifi)
\f1ec (calc)
\f1ed (paypal)
\f1f6 (bell-off)
\f1f7 (bell-off-empty)
\f1f8 (trash)
\f1fd (birthday)
\f201 (chart-line)
\f204 (toggle-off)
\f205 (toggle-on)
\f206 (bicycle)
\f207 (bus)
\f21a (ship)
\f21b (user-secret)
\f21c (motorcycle)
\f21e (heartbeat)
\f230 (facebook-official)
\f231 (pinterest)
\f234 (user-plus)
\f235 (user-times)
\f236 (bed)
\f238 (train)
\f239 (subway)
\f24e (balance-scale)
\f275 (industry)
\f276 (map-pin)
\f277 (map-signs)
\f278 (map-o)
\f279 (map)
\f27a (commenting)
\f283 (credit-card-alt)
\f290 (shopping-bag)
\f292 (hashtag)
\f2b6 (envelope-open)
\f2b7 (envelope-open-o)
\f2ba (address-book-o)
\f2bb (address-card)
\f2bc (address-card-o)
\f2bd (user-circle)
\f2be (user-circle-o)
\f2c0 (user-o)
\f2cd (bath)
\f308 (facebook-squared)
\f30c (linkedin-squared)
<p class="e800">\e800 (search)</p>
<p class="e801">\e801 (down-dir)</p>
<p class="e802">\e802 (heart)</p>
<p class="e803">\e803 (heart-empty)</p>
<p class="e804">\e804 (star)</p>
<p class="e805">\e805 (star-empty)</p>
<p class="e806">\e806 (user)</p>
<p class="e807">\e807 (plus)</p>
<p class="e808">\e808 (minus)</p>
<p class="e809">\e809 (cancel)</p>
<p class="e80a">\e80a (ok)</p>
<p class="e80b">\e80b (camera)</p>
<p class="e80c">\e80c (picture)</p>
<p class="e80d">\e80d (video)</p>
<p class="e80e">\e80e (home)</p>
<p class="e80f">\e80f (link)</p>
<p class="e810">\e810 (lock)</p>
<p class="e811">\e811 (pin)</p>
<p class="e812">\e812 (download)</p>
<p class="e813">\e813 (upload)</p>
<p class="e814">\e814 (up-dir)</p>
<p class="e815">\e815 (left-dir)</p>
<p class="e816">\e816 (pencil)</p>
<p class="e817">\e817 (print)</p>
<p class="e818">\e818 (chat)</p>
<p class="e819">\e819 (location)</p>
<p class="e81a">\e81a (folder-open)</p>
<p class="e81b">\e81b (phone)</p>
<p class="e81c">\e81c (cog)</p>
<p class="e81d">\e81d (wrench)</p>
<p class="e81e">\e81e (calendar)</p>
<p class="e81f">\e81f (zoom-out)</p>
<p class="e820">\e820 (zoom-in)</p>
<p class="e821">\e821 (volume-up)</p>
<p class="e822">\e822 (volume-down)</p>
<p class="e823">\e823 (clock)</p>
<p class="e824">\e824 (down-circled2)</p>
<p class="e825">\e825 (up-circled2)</p>
<p class="e826">\e826 (left-open)</p>
<p class="e827">\e827 (right-open)</p>
<p class="e828">\e828 (down-open)</p>
<p class="e829">\e829 (up-open)</p>
<p class="e82a">\e82a (up-big)</p>
<p class="e82b">\e82b (right-big)</p>
<p class="e82c">\e82c (left-big)</p>
<p class="e82d">\e82d (down-big)</p>
<p class="e82e">\e82e (stop)</p>
<p class="e82f">\e82f (pause)</p>
<p class="e830">\e830 (play)</p>
<p class="e831">\e831 (award)</p>
<p class="e832">\e832 (globe)</p>
<p class="e833">\e833 (gift)</p>
<p class="e834">\e834 (credit-card)</p>
<p class="e835">\e835 (floppy)</p>
<p class="e836">\e836 (bell)</p>
<p class="e837">\e837 (plus-circled)</p>
<p class="e838">\e838 (minus-circled)</p>
<p class="e839">\e839 (info-circled)</p>
<p class="e83a">\e83a (help-circled)</p>
<p class="e83b">\e83b (attention)</p>
<p class="e83c">\e83c (attention-circled)</p>
<p class="e83d">\e83d (folder)</p>
<p class="e83e">\e83e (right-dir)</p>
<p class="e83f">\e83f (cancel-circled2)</p>
<p class="e840">\e840 (cancel-circled)</p>
<p class="e841">\e841 (ok-circled)</p>
<p class="e842">\e842 (ok-circled2)</p>
<p class="e843">\e843 (lock-open)</p>
<p class="e844">\e844 (comment)</p>
<p class="e845">\e845 (doc)</p>
<p class="e846">\e846 (ccw)</p>
<p class="e847">\e847 (play-circled2)</p>
<p class="e848">\e848 (eject)</p>
<p class="e849">\e849 (signal)</p>
<p class="e84a">\e84a (th-list)</p>
<p class="e84b">\e84b (th-large)</p>
<p class="e84c">\e84c (th)</p>
<p class="e84d">\e84d (users)</p>
<p class="e84e">\e84e (tag)</p>
<p class="e84f">\e84f (tags)</p>
<p class="e850">\e850 (flag)</p>
<p class="e851">\e851 (forward)</p>
<p class="e852">\e852 (basket)</p>
<p class="e853">\e853 (volume-off)</p>
<p class="e854">\e854 (headphones)</p>
<p class="e855">\e855 (to-end)</p>
<p class="e856">\e856 (to-end-alt)</p>
<p class="e857">\e857 (to-start)</p>
<p class="e858">\e858 (to-start-alt)</p>
<p class="e859">\e859 (fast-fw)</p>
<p class="e85a">\e85a (fast-bw)</p>
<p class="e85b">\e85b (flight)</p>
<p class="e85c">\e85c (off)</p>
<p class="e85d">\e85d (key)</p>
<p class="e85e">\e85e (truck)</p>
<p class="e85f">\e85f (layers)</p>
<p class="e860">\e860 (signal-1)</p>
<p class="e861">\e861 (target)</p>
<p class="e862">\e862 (library)</p>
<p class="e863">\e863 (glasses)</p>
<p class="e864">\e864 (trash-1)</p>
<p class="e865">\e865 (layers-alt)</p>
<p class="e866">\e866 (trash-3)</p>
<p class="e867">\e867 (trash-4)</p>
<p class="e868">\e868 (trash-empty)</p>
<p class="e869">\e869 (water)</p>
<p class="e86a">\e86a (glass)</p>
<p class="e86b">\e86b (megaphone)</p>
<p class="e86c">\e86c (droplet)</p>
<p class="e86d">\e86d (air)</p>
<p class="e86e">\e86e (blind)</p>
<p class="e86f">\e86f (guidedog)</p>
<p class="e870">\e870 (accessibility)</p>
<p class="e871">\e871 (hearing-impaired)</p>
<p class="e872">\e872 (road)</p>
<p class="e873">\e873 (resize-full)</p>
<p class="e874">\e874 (resize-small)</p>
<p class="e875">\e875 (resize-full-1)</p>
<p class="e876">\e876 (resize-small-1)</p>
<p class="e877">\e877 (code)</p>
<p class="f08e">\f08e (link-ext)</p>
<p class="f099">\f099 (twitter)</p>
<p class="f09a">\f09a (facebook)</p>
<p class="f09e">\f09e (rss)</p>
<p class="f0b0">\f0b0 (filter)</p>
<p class="f0b2">\f0b2 (resize-full-alt)</p>
<p class="f0c9">\f0c9 (menu)</p>
<p class="f0d2">\f0d2 (pinterest-circled)</p>
<p class="f0d3">\f0d3 (pinterest-squared)</p>
<p class="f0d4">\f0d4 (gplus-squared)</p>
<p class="f0d5">\f0d5 (gplus)</p>
<p class="f0d6">\f0d6 (money)</p>
<p class="f0dc">\f0dc (sort)</p>
<p class="f0dd">\f0dd (sort-down)</p>
<p class="f0de">\f0de (sort-up)</p>
<p class="f0e0">\f0e0 (mail-alt)</p>
<p class="f0e1">\f0e1 (linkedin)</p>
<p class="f0e8">\f0e8 (sitemap)</p>
<p class="f0eb">\f0eb (lightbulb)</p>
<p class="f0ed">\f0ed (download-cloud)</p>
<p class="f0ee">\f0ee (upload-cloud)</p>
<p class="f0f3">\f0f3 (bell-alt)</p>
<p class="f0f4">\f0f4 (coffee)</p>
<p class="f0f5">\f0f5 (food)</p>
<p class="f0f6">\f0f6 (doc-text)</p>
<p class="f0f8">\f0f8 (hospital)</p>
<p class="f0f9">\f0f9 (ambulance)</p>
<p class="f0fa">\f0fa (medkit)</p>
<p class="f0fc">\f0fc (beer)</p>
<p class="f0fd">\f0fd (h-sigh)</p>
<p class="f0fe">\f0fe (plus-squared)</p>
<p class="f104">\f104 (angle-left)</p>
<p class="f105">\f105 (angle-right)</p>
<p class="f106">\f106 (angle-up)</p>
<p class="f107">\f107 (angle-down)</p>
<p class="f108">\f108 (desktop)</p>
<p class="f109">\f109 (laptop)</p>
<p class="f10a">\f10a (tablet)</p>
<p class="f10b">\f10b (mobile)</p>
<p class="f10d">\f10d (quote-left)</p>
<p class="f10e">\f10e (quote-right)</p>
<p class="f112">\f112 (reply)</p>
<p class="f114">\f114 (folder-empty)</p>
<p class="f118">\f118 (smile)</p>
<p class="f119">\f119 (frown)</p>
<p class="f11a">\f11a (meh)</p>
<p class="f120">\f120 (terminal)</p>
<p class="f123">\f123 (star-half-alt)</p>
<p class="f124">\f124 (direction)</p>
<p class="f128">\f128 (help)</p>
<p class="f129">\f129 (info)</p>
<p class="f12a">\f12a (attention-alt)</p>
<p class="f130">\f130 (mic)</p>
<p class="f131">\f131 (mute)</p>
<p class="f133">\f133 (calendar-empty)</p>
<p class="f13d">\f13d (anchor)</p>
<p class="f141">\f141 (ellipsis)</p>
<p class="f142">\f142 (ellipsis-vert)</p>
<p class="f143">\f143 (rss-squared)</p>
<p class="f144">\f144 (play-circled)</p>
<p class="f145">\f145 (ticket)</p>
<p class="f146">\f146 (minus-squared)</p>
<p class="f147">\f147 (minus-squared-alt)</p>
<p class="f148">\f148 (level-up)</p>
<p class="f149">\f149 (level-down)</p>
<p class="f14a">\f14a (ok-squared)</p>
<p class="f154">\f154 (pound)</p>
<p class="f15b">\f15b (doc-inv)</p>
<p class="f15c">\f15c (doc-text-inv)</p>
<p class="f15d">\f15d (sort-name-up)</p>
<p class="f15e">\f15e (sort-name-down)</p>
<p class="f160">\f160 (sort-alt-up)</p>
<p class="f161">\f161 (sort-alt-down)</p>
<p class="f162">\f162 (sort-number-up)</p>
<p class="f163">\f163 (sort-number-down)</p>
<p class="f164">\f164 (thumbs-up-alt)</p>
<p class="f165">\f165 (thumbs-down-alt)</p>
<p class="f166">\f166 (youtube-squared)</p>
<p class="f167">\f167 (youtube)</p>
<p class="f16a">\f16a (youtube-play)</p>
<p class="f173">\f173 (tumblr)</p>
<p class="f174">\f174 (tumblr-squared)</p>
<p class="f17e">\f17e (skype)</p>
<p class="f18e">\f18e (right-circled2)</p>
<p class="f190">\f190 (left-circled2)</p>
<p class="f196">\f196 (plus-squared-alt)</p>
<p class="f198">\f198 (slack)</p>
<p class="f19c">\f19c (bank)</p>
<p class="f19d">\f19d (graduation-cap)</p>
<p class="f1ad">\f1ad (building-filled)</p>
<p class="f1b0">\f1b0 (paw)</p>
<p class="f1b1">\f1b1 (spoon)</p>
<p class="f1b9">\f1b9 (cab)</p>
<p class="f1ba">\f1ba (taxi)</p>
<p class="f1bb">\f1bb (tree)</p>
<p class="f1bc">\f1bc (spotify)</p>
<p class="f1be">\f1be (soundcloud)</p>
<p class="f1c1">\f1c1 (file-pdf)</p>
<p class="f1c2">\f1c2 (file-word)</p>
<p class="f1c3">\f1c3 (file-excel)</p>
<p class="f1c4">\f1c4 (file-powerpoint)</p>
<p class="f1c5">\f1c5 (file-image)</p>
<p class="f1c6">\f1c6 (file-audio)</p>
<p class="f1c7">\f1c7 (file-video)</p>
<p class="f1c8">\f1c8 (file-code)</p>
<p class="f1e0">\f1e0 (share)</p>
<p class="f1e1">\f1e1 (share-squared)</p>
<p class="f1e3">\f1e3 (soccer-ball)</p>
<p class="f1eb">\f1eb (wifi)</p>
<p class="f1ec">\f1ec (calc)</p>
<p class="f1ed">\f1ed (paypal)</p>
<p class="f1f6">\f1f6 (bell-off)</p>
<p class="f1f7">\f1f7 (bell-off-empty)</p>
<p class="f1f8">\f1f8 (trash)</p>
<p class="f1fd">\f1fd (birthday)</p>
<p class="f201">\f201 (chart-line)</p>
<p class="f204">\f204 (toggle-off)</p>
<p class="f205">\f205 (toggle-on)</p>
<p class="f206">\f206 (bicycle)</p>
<p class="f207">\f207 (bus)</p>
<p class="f21a">\f21a (ship)</p>
<p class="f21b">\f21b (user-secret)</p>
<p class="f21c">\f21c (motorcycle)</p>
<p class="f21e">\f21e (heartbeat)</p>
<p class="f230">\f230 (facebook-official)</p>
<p class="f231">\f231 (pinterest)</p>
<p class="f234">\f234 (user-plus)</p>
<p class="f235">\f235 (user-times)</p>
<p class="f236">\f236 (bed)</p>
<p class="f238">\f238 (train)</p>
<p class="f239">\f239 (subway)</p>
<p class="f24e">\f24e (balance-scale)</p>
<p class="f275">\f275 (industry)</p>
<p class="f276">\f276 (map-pin)</p>
<p class="f277">\f277 (map-signs)</p>
<p class="f278">\f278 (map-o)</p>
<p class="f279">\f279 (map)</p>
<p class="f27a">\f27a (commenting)</p>
<p class="f283">\f283 (credit-card-alt)</p>
<p class="f290">\f290 (shopping-bag)</p>
<p class="f292">\f292 (hashtag)</p>
<p class="f2b6">\f2b6 (envelope-open)</p>
<p class="f2b7">\f2b7 (envelope-open-o)</p>
<p class="f2ba">\f2ba (address-book-o)</p>
<p class="f2bb">\f2bb (address-card)</p>
<p class="f2bc">\f2bc (address-card-o)</p>
<p class="f2bd">\f2bd (user-circle)</p>
<p class="f2be">\f2be (user-circle-o)</p>
<p class="f2c0">\f2c0 (user-o)</p>
<p class="f2cd">\f2cd (bath)</p>
<p class="f308">\f308 (facebook-squared)</p>
<p class="f30c">\f30c (linkedin-squared)</p>Share this page
