<commit_before>---
layout: article
title: "Use SVG for icons"
description: "When adding icons to your page, use SVG icons where possible or
in some cases, unicode characters."
introduction: "When adding icons to your page, use SVG icons where possible or
in some cases, unicode characters."
authors:
  - petelepage
article:
  written_on: 2014-06-10
  updated_on: 2014-06-10
  order: 3
collection: images
key-takeaways:
  avoid-images:
    - Use SVG or unicode for icons instead of raster images.
---

{% wrap content%}

<style>
  img, video, object {
    max-width: 100%;
  }

  img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

{% include modules/toc.liquid %}


{% include modules/takeaway.liquid list=page.key-takeaways.avoid-images %}

## Replace simple icons with unicode

Many fonts include support for the myriad of unicode glyphs, which can be used
instead of images.  Unlike images, unicode fonts scale well, and look good no
matter matter how small or large they appear on screen.

Beyond the normal character set, unicode may include symbols for number forms
(&#8528;), arrows (&#8592;), math operators (&#8730;), geometric shapes
(&#9733;), control pictures (&#9654;), braille patterns (&#10255;), music
notation (&#9836;), Greek letters (&#937;), even chess pieces (&#9822;).

Including a unicode character is done in the same way named entities are:
`&#XXXX`, where `XXXX` represents the unicode character number.  For example:

{% highlight html %}
You're a super &#9733;
{% endhighlight %}

You're a super &#9733;
<commit_msg>Fix typo as reported in issue #704<commit_after>---
layout: article
title: "Use SVG for icons"
description: "When adding icons to your page, use SVG icons where possible or
in some cases, unicode characters."
introduction: "When adding icons to your page, use SVG icons where possible or
in some cases, unicode characters."
authors:
  - petelepage
article:
  written_on: 2014-06-10
  updated_on: 2014-06-10
  order: 3
collection: images
key-takeaways:
  avoid-images:
    - Use SVG or unicode for icons instead of raster images.
---

{% wrap content%}

<style>
  img, video, object {
    max-width: 100%;
  }

  img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

{% include modules/toc.liquid %}


{% include modules/takeaway.liquid list=page.key-takeaways.avoid-images %}

## Replace simple icons with unicode

Many fonts include support for the myriad of unicode glyphs, which can be used
instead of images.  Unlike images, unicode fonts scale well, and look good no
matter how small or large they appear on screen.

Beyond the normal character set, unicode may include symbols for number forms
(&#8528;), arrows (&#8592;), math operators (&#8730;), geometric shapes
(&#9733;), control pictures (&#9654;), braille patterns (&#10255;), music
notation (&#9836;), Greek letters (&#937;), even chess pieces (&#9822;).

Including a unicode character is done in the same way named entities are:
`&#XXXX`, where `XXXX` represents the unicode character number.  For example:

{% highlight html %}
You're a super &#9733;
{% endhighlight %}

You're a super &#9733;

{'fraction_non_alphanumeric': 0.11016949152542373, 'fraction_numerical': 0.04111738857501569, 'mean_word_length': 4.190553745928339, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2649859', 'n_tokens_mistral': 1110, 'n_tokens_neox': 923, 'n_words': 407}