<commit_before><h2>Icons</h2>

<ul>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="icon-form">Icon Form</a>
  </li>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="icon-construction">Icon Construction</a>
  </li>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="placement">Placement</a>
  </li>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="icons">Icons</a>
  </li>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="accessibility">Accessibility</a>
  </li>
</ul>

<h3 id="icon-form">Icon Form</h3>

<p>Firefox icons are informative, fun and friendly.
A good Firefox icon is as simple as possible while still representing the correct metaphor.
Toolbar icons have a centered weight and work well as a set. </p>

<h3 id="icon-construction">Icon Construction</h3>

<h4>Grid</h4>

<p>
  Firefox icons live on a 16 x 16 pixel grid. 
  Keep your shape weighted towards the middle area of the grid reserving the outer 1px margin for visual weighting and maintining relative aspect ratios.
</p>

<img class="" src="images/icon-design/grid.png" alt="icon design construction grid">

<h4>Shape</h4>

<p>
  Use positive and negative space to create the shape of your icon.
  When your icon is primarily shaped using lines use a 2px stroke for the foundation and a 1px line for extra details. Rounded end-caps and rounded line joins keep the icon smooth and friendly. 
</p>


<img class="" src="images/icon-design/shape.png" alt="icon design shape">

<h4>Export your icon</h4>

<p>...</p>

<h3 id="placement">Placement</h3>

<h4>Toolbar</h4>

<p>Center-align icons in the toolbar. </p>

<img class="" src="images/icon-design/placement.png" alt="icon placement in the toolbar spec - 10px left/right">


<h3 id="accessibility">Accesibility</h3>

<p>
  Avoid obscure metaphors, opting for text labels or annotations instead. Use symbols that are recognizable to your users and work for a global audience. If your icon affords interactivity, give it a text label. All icons should have a text-based equivalent for screen readers.
</p>

<div class="spacer"></div><commit_msg>adding icons id in the page<commit_after><header>
  <h2 id="icons">Icons</h2>

  <ul>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="icon-form">Icon Form</a>
  </li>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="icon-construction">Icon Construction</a>
  </li>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="placement">Placement</a>
  </li>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="icons">Icons</a>
  </li>
  <li>
    <a class="mr2 blue-5 no-underline pointer" data-href="accessibility">Accessibility</a>
  </li>
  </ul>

</header>

<section>
<h3 id="icon-form">Icon Form</h3>

<p>Firefox icons are informative, fun and friendly.
A good Firefox icon is as simple as possible while still representing the correct metaphor.
Toolbar icons have a centered weight and work well as a set. </p>

<h3 id="icon-construction">Icon Construction</h3>

<h4 id="grid">Grid</h4>

<p>
  Firefox icons live on a 16 x 16 pixel grid. 
  Keep your shape weighted towards the middle area of the grid reserving the outer 1px margin for visual weighting and maintining relative aspect ratios.
</p>

<img class="" src="images/icon-design/grid.png" alt="icon design construction grid">

<h4 id="shape">Shape</h4>

<p>
  Use positive and negative space to create the shape of your icon.
  When your icon is primarily shaped using lines use a 2px stroke for the foundation and a 1px line for extra details. Rounded end-caps and rounded line joins keep the icon smooth and friendly. 
</p>


<img class="" src="images/icon-design/shape.png" alt="icon design shape">

<h4 id="export">Export your icon</h4>

<p>...</p>

<h3 id="placement">Placement</h3>

<h4 id="toolbar">Toolbar</h4>

<p>Center-align icons in the toolbar. </p>

<img class="" src="images/icon-design/placement.png" alt="icon placement in the toolbar spec - 10px left/right">


<h3 id="accessibility">Accesibility</h3>

<p>
  Avoid obscure metaphors, opting for text labels or annotations instead. Use symbols that are recognizable to your users and work for a global audience. If your icon affords interactivity, give it a text label. All icons should have a text-based equivalent for screen readers.
</p>

<div class="spacer"></div>
</section>
{'fraction_non_alphanumeric': 0.1288050885960927, 'fraction_numerical': 0.016810540663334848, 'mean_word_length': 4.204491725768322, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 121, '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': '5903061', 'n_tokens_mistral': 1465, 'n_tokens_neox': 1410, 'n_words': 531}