Download and Use The Font

If you want to incorporate the symbols into your font, you can download the Power Symbol font files from GitHub.

You want to start using these symbols straight away? Ok! Here are fonts which are suitable for use on your computer or as embedded web fonts.

All these fonts are free to use and reuse. We’d love to see people incorporating these into their existing fonts.

Webfont

If you want to embed these fonts on a webpage, download the woff2 file and place the following in your CSS.

@font-face {
    font-family: 'power_symbols';
    src: url('Unicode_IEC_symbol.woff2') format('woff2');
    unicode-range: U+23FB-23FE, U+2B58;
}

body {
  font-family: 'power_symbols';
}

Or, you can embed the font directly into your CSS.

@font-face { 
    font-family: 'power_symbols'; 
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAANQAAoAAAAABrgAAAMEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAglIKhGyECAsOAAE2AiQDDgQgBYFPB38bjwXIHgfV7R3GNyxRxDDdFzEiCOaqqpNMNnvASAqe0UgAEO7V0fV2796P3WVSiSXod4FKVgL7uKjg+sAPVTFarV6/nw9/Ob618YA+gL+bg9PAxqZEs8iyuW2LJ5RTRi1uO/iOqHUq1fQIWSGuQUlW6lm6D6KJPDn93pqkBolSOdmo5hbT1kRXwDA6ztNf83yNzwtyBKi5GUjJrFH2eyZJBRrJdEOhkEDL5x3n/b+Alk+8kV/yb97p7AeMnPpvclAJ5XiLaAbIQEgkQkiyKl0qt65StVqlOHiwqfmUgPwYOUxjZccp4213jC9cun7zAxz7kVSMqmgeO87lvHltfIGAYx84fevYD/IRJYcdz10+xI5TzaXj9DAJ2THC+AL1dfJnWmWSXCAIooMkMQgQZc530JVeVJBsF0M0QuXqNwTsH4g6iMgpaoZlNQpV7l/agp9k35f+IJiuXvu6OepmVMF29dbXzcNhFNbYoWVv72VlB50Mnp3dpMfB0nXB5n+LRs9qrWtocN16tz/4v3+Dzy0K7v9XOxD87uM40iq2v43KPMlxw8O1x8zSnG56OzC7M6vzgJnYeqBe0Mws6LViMCOyGA0Uo0hq66hIhPyc3zkxi36fLbl9FHVUib+zjSv/dGD4xXPozJmTna0qORp1VAKlUNKD7brQ3O+GrK2NgMVLIiHvNhLhA7rnbRcFvfv2/GiyUb3TM7CTy9WORjNOd2PRLc2HfVzTYLSjhktHE9q67cqYfPX6jEYSNvwB6PjgtQTbjYe2EyhQPtwOBIIPbqTd41UH/V9ULMCXZ6qf2J28qOyLAgoJCIAMxedht4IhgvoJUcAdvdLRUdVMgdwgCUgQAsMAVHJHgBAIkMiFACnKBMhEQEoqKjblqCkVWbmQIJKopDZJ0dzMJKSkjpYNOfpvm+Msq51mzfbr0s02k622ynq7beaoOd9kh53W22qLZrrroptk1C3IiSTSyKIUeaW9Vbt/vDW1wU2pKV6pMTFJ3sJTWGtnr+AeJKa33FITGZ8RmRQNAAA=) format('woff2');
    unicode-range: U+23FB-23FE, U+2B58;
}

In your HTML you can then use something like:

<p>To switch the console on:
Press the &#x23FB; button.</p>

You can use CSS colours to change the appearance, for example :

<span style="color:red;">&#x23FB;</span>

This table shows the HTML Escape code for each symbol.

Character Escape Code Symbol
Power &#x23FB;
Toggle Power &#x23FC;
Power On &#x23FD;
Power Off &#x2B58;
Sleep Mode &#x23FE;

As of 22 June 2016, the symbols are part of Unicode 9.0 and can be used freely!

8 thoughts on “Download and Use The Font

    1. It depends on the Computer :-) Usually double-clicking a .ttf file should prompt your system to install the file,

    1. I’ve re-uploaded the SVG font. You may need to right-click and select “save as” – otherwise your browser will try to download it as an image.

  1. I think there’s a mismatch in the font-family definition and usage in the webfont example. The definition names the family as iec_symbols_unicoderegular, while the iec_power class uses iec_unicoderegular.

  2. Do I need to download the font to cut and paste 5009 into a tweet? From this page or the Unicode PDF it pastes as ⏻ :(

Comments are closed.