From 580f178541646b864bb49fb9d7c3ecd48469eb73 Mon Sep 17 00:00:00 2001
From: Benjamin Schaaf <bschaaf@sublimetext.com>
Date: Mon, 15 Jun 2026 16:56:27 +1000
Subject: [PATCH] Fix vertical alignment of icons

---
 _includes/footer.njk          |  2 +-
 _includes/header.njk          |  2 +-
 _includes/packages/macros.njk |  8 ++++----
 index.njk                     |  2 +-
 labels.njk                    |  2 +-
 static/style/footer.css       |  1 -
 static/style/label-icons.css  |  4 ----
 static/style/package.css      | 12 ++++++------
 static/styles.css             | 18 ++++++++++++------
 9 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/_includes/footer.njk b/_includes/footer.njk
index f733feaec..d853ec4d2 100644
--- a/_includes/footer.njk
+++ b/_includes/footer.njk
@@ -15,7 +15,7 @@
 
   <nav>
     <a id="footer-links" href="https://github.com/sublimehq/package_control_channel">Submit your own package</a>
-    <a class="github-link" href="https://github.com/packagecontrol/thecrawl/tree/gh-pages">
+    <a class="github-link inline-icon" href="https://github.com/packagecontrol/thecrawl/tree/gh-pages">
       {{ util.icon('octocat') }}
       <span class="screenreader-only">This website on GitHub</span>
     </a>
diff --git a/_includes/header.njk b/_includes/header.njk
index 1dfe3d6f9..d390b8170 100644
--- a/_includes/header.njk
+++ b/_includes/header.njk
@@ -39,7 +39,7 @@
     <nav>
       {% if isPackagePage %}
         <a class="search-toggle" href="/#search-field">
-          {{ util.icon('search') }}
+          <span class="inline-icon">{{ util.icon('search') }}</span>
           <span class="screenreader-only">Search</span>
         </a>
       {% endif %}
diff --git a/_includes/packages/macros.njk b/_includes/packages/macros.njk
index 0a1eba647..5c951373d 100644
--- a/_includes/packages/macros.njk
+++ b/_includes/packages/macros.njk
@@ -42,7 +42,7 @@
   {% endif %}
 
   <span class="download-notes-sep">·</span>
-  <a class="download" href="{{ version.download_url or version.url }}" title="Download package">
+  <a class="download inline-icon" href="{{ version.download_url or version.url }}" title="Download package">
     {{ util.icon('download') }}
   </a>
 
@@ -127,7 +127,7 @@
 {% macro installs(count, pretty=false) %}
   {% if count > 0 %}
     <li class="installs" title="Installed {{ count }} {{ 'time' if count < 2 else 'times' }}">
-      <span aria-hidden="true">{{ util.icon('download') }}</span>
+      <span class="icon" aria-hidden="true">{{ util.icon('download') }}</span>
       <span class="counter">{{ (count | compact) if pretty else (count | grouping) }}</span>
       <span class="screenreader-only">installs</span>
     </li>
@@ -137,7 +137,7 @@
 {% macro stars(count, pretty=false) %}
   {% if count > 0 %}
     <li class="stars" title="{{ count }} {{ 'star' if count < 2 else 'stars' }} on GitHub">
-      <span aria-hidden="true">{{ util.icon('star') }}</span>
+      <span class="icon" aria-hidden="true">{{ util.icon('star') }}</span>
       <span class="counter">{{ (count | compact) if pretty else (count | grouping) }}</span>
       <span class="screenreader-only">stars</span>
     </li>
@@ -184,7 +184,7 @@
             {% set icon_id = (label | label_icon_id) if with_icons else '' %}
             {% if icon_id %}
               {% set tint = (label | label_icon_tint) if with_icons else '' %}
-              <svg class="label-icon{{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
+              <svg class="inline-icon{{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
                 <use href="/{{ 'static/label-icons.svg' | bust }}#{{ icon_id }}"></use>
               </svg>
             {% endif %}
diff --git a/index.njk b/index.njk
index 069f9d56f..4307d78c7 100644
--- a/index.njk
+++ b/index.njk
@@ -68,7 +68,7 @@ page_type: home
         </span>
         {% if pkg.stars > 0 %}
           <span class="remarkable-stars" title="{{ pkg.stars }} {{ 'star' if pkg.stars == 1 else 'stars' }} on GitHub">
-            <span aria-hidden="true">{{ util.icon('star') }}</span>
+            <span class="icon" aria-hidden="true">{{ util.icon('star') }}</span>
             <span class="counter">{{ pkg.stars | compact }}</span>
             <span class="screenreader-only">stars</span>
           </span>
diff --git a/labels.njk b/labels.njk
index 8659dba8f..e95408b99 100644
--- a/labels.njk
+++ b/labels.njk
@@ -55,7 +55,7 @@ page_type: labels
           {% set icon_id = item.key | label_icon_id %}
           {% if icon_id %}
             {% set tint = item.key | label_icon_tint %}
-            <svg class="label-icon{{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
+            <svg class="{{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
               <use href="/{{ 'static/label-icons.svg' | bust }}#{{ icon_id }}"></use>
             </svg>
           {% endif %}
diff --git a/static/style/footer.css b/static/style/footer.css
index d0275c303..ab534ad72 100644
--- a/static/style/footer.css
+++ b/static/style/footer.css
@@ -17,7 +17,6 @@ footer {
 
   .github-link {
     margin-left: 0.9ex;
-    vertical-align: -1px;
     padding: 2px 0px 1px 4px;
     border-radius: 50%;
 
diff --git a/static/style/label-icons.css b/static/style/label-icons.css
index 464a222ee..9ba59f0eb 100644
--- a/static/style/label-icons.css
+++ b/static/style/label-icons.css
@@ -11,10 +11,6 @@
   --label-icon-color-graphite: var(--graphite-1);
 }
 
-.label-icon {
-  fill: currentColor;
-}
-
 .label-icon--orange {
   color: var(--label-icon-color-orange);
 }
diff --git a/static/style/package.css b/static/style/package.css
index b657033c5..f95c99ce7 100644
--- a/static/style/package.css
+++ b/static/style/package.css
@@ -45,8 +45,8 @@ html.page-package {
 }
 
 .download {
+  display: inline-block;
   color: var(--foreground-2);
-  vertical-align: -1px;
   margin-left: 2px;
 
   &:hover {
@@ -84,6 +84,11 @@ ul.stats {
   > * {
     display: flex;
     margin: 0;
+
+    > * {
+      display: flex;
+      align-items: center;
+    }
   }
 
   svg {
@@ -284,11 +289,6 @@ section[name="package"] > ul.stats .platforms {
       }
     }
   }
-
-  a svg {
-    width: 16px;
-    height: 16px;
-  }
 }
 
 .warning-message {
diff --git a/static/styles.css b/static/styles.css
index 221d16351..9cd4c8f5d 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -107,14 +107,20 @@ summary {
   cursor: pointer;
 }
 
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.inline-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}
+
 svg {
   fill: currentColor;
-  p > &,
-  span > &,
-  a > & {
-    /* alignment of icons in text is just slightly off */
-    vertical-align: -1px;
-  }
 }
 
 code {