diff --git a/.npmignore b/.npmignore
index 683c082..415dcb5 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,4 +1,4 @@
-downloads/
+blob/master/downloads/
 scss/styleguide.scss
 index.html
 /site
diff --git a/dist/index.html b/dist/index.html
index 561a0fe..d20ccf3 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -79,7 +79,7 @@
       </symbol></svg>    <header class="sg-header">
       <div class="sg-container">
         <a href="/" class="dat-logo">
-          <img src="downloads/dat-hexagon.svg" />
+          <img src="blob/master/downloads/dat-hexagon.svg" />
           Dat <span>Design</span>
         </a>
       </div>
@@ -96,21 +96,21 @@ <h2>Dat Logo</h2>
           <h3 class="hd-xxs sg-label">Dat Data Logo</h3>
           <div class="sg-subsection">
             <p>
-              <img src="downloads/dat-logo.svg" alt="Dat Data Logo" class="sg-subsection__img" />
+              <img src="blob/master/downloads/dat-logo.svg" alt="Dat Data Logo" class="sg-subsection__img" />
               This is the Dat logo. Only use it when it can be displayed at least 60px tall, in order to keep the text legible.
             </p>
             <p>
-              <a href="downloads/dat-logo.svg">Download .svg</a> | <a href="downloads/dat-logo.png">Download .png</a>
+              <a href="blob/master/downloads/dat-logo.svg">Download .svg</a> | <a href="blob/master/downloads/dat-logo.png">Download .png</a>
             </p>
           </div>
           <h3 class="hd-xxs sg-label">Dat Hexagon</h3>
           <div class="sg-subsection">
             <p>
-              <img src="downloads/dat-hexagon.svg" alt="Dat Hexagon" class="sg-subsection__img" />
+              <img src="blob/master/downloads/dat-hexagon.svg" alt="Dat Hexagon" class="sg-subsection__img" />
               Use the plain hexagon without text when the logo is displayed in small sizes, e.g. in small header bars or favicons.
             </p>
             <p>
-              <a href="downloads/dat-hexagon.svg">Download .svg</a> | <a href="downloads/dat-hexagon.png">Download .png</a>
+              <a href="blob/master/downloads/dat-hexagon.svg">Download .svg</a> | <a href="blob/master/downloads/dat-hexagon.png">Download .png</a>
             </p>
           </div>
         </div>
diff --git a/docs/index.html b/docs/index.html
index 0d81631..da4a8c6 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -69,7 +69,7 @@
       </symbol></svg>    <header class="sg-header">
       <div class="sg-container">
         <h1>
-          <img src="../downloads/dat-hexagon.svg" style="width: 34px;">
+          <img src="https://raw.githubusercontent.com/dat-ecosystem-archive/design/92ea62454a58219634aae4e205b51038c3ebe6d6/downloads/dat-hexagon.svg" style="width: 34px;">
           dat <span>design</span>
         </h1>
       </div>
@@ -86,21 +86,21 @@ <h2>Dat Logo</h2>
           <h3 class="hd-xxs sg-label">Dat Data Logo</h3>
           <div class="sg-subsection">
             <p>
-              <img src="../downloads/dat-logo.svg" alt="Dat Data Logo" class="sg-subsection__img" />
+              <img src="https://raw.githubusercontent.com/dat-ecosystem-archive/design/92ea62454a58219634aae4e205b51038c3ebe6d6/downloads/dat-logo.svg" alt="Dat Data Logo" class="sg-subsection__img" />
               This is the Dat logo. It consists of the hexagon in Dat green and the centered "dat DATA" set in Source Sans. Only use it when it can be displayed at least 60px tall, in order to keep the text legible.
             </p>
             <p>
-              <a href="../downloads/dat-logo.svg">Download .svg</a> | <a href="../downloads/dat-logo.png">Download .png</a>
+              <a href="https://raw.githubusercontent.com/dat-ecosystem-archive/design/92ea62454a58219634aae4e205b51038c3ebe6d6/downloads/dat-logo.svg">Download .svg</a> | <a href="https://raw.githubusercontent.com/dat-ecosystem-archive/design/92ea62454a58219634aae4e205b51038c3ebe6d6/downloads/dat-logo.png">Download .png</a>
             </p>
           </div>
           <h3 class="hd-xxs sg-label">Dat Hexagon</h3>
           <div class="sg-subsection">
             <p>
-              <img src="../downloads/dat-hexagon.svg" alt="Dat Hexagon" class="sg-subsection__img" />
+              <img src="https://raw.githubusercontent.com/dat-ecosystem-archive/design/92ea62454a58219634aae4e205b51038c3ebe6d6/downloads/dat-hexagon.svg" alt="Dat Hexagon" class="sg-subsection__img" />
               Use the green hexagon without text when the logo is displayed in small sizes, e.g. in small header bars or favicons.
             </p>
             <p>
-              <a href="../downloads/dat-hexagon.svg">Download .svg</a> | <a href="../downloads/dat-hexagon.png">Download .png</a>
+              <a href="https://raw.githubusercontent.com/dat-ecosystem-archive/design/92ea62454a58219634aae4e205b51038c3ebe6d6/downloads/dat-hexagon.svg">Download .svg</a> | <a href="https://raw.githubusercontent.com/dat-ecosystem-archive/design/92ea62454a58219634aae4e205b51038c3ebe6d6/downloads/dat-hexagon.png">Download .png</a>
             </p>
           </div>
         </div>
diff --git a/docs/templates/index.hbs b/docs/templates/index.hbs
index 8dff571..0c6a2f7 100644
--- a/docs/templates/index.hbs
+++ b/docs/templates/index.hbs
@@ -13,7 +13,7 @@
     <header class="sg-header">
       <div class="sg-container">
         <a href="/" class="dat-logo">
-          <img src="downloads/dat-hexagon.svg" />
+          <img src="blob/master/downloads/dat-hexagon.svg" />
           Dat <span>Design</span>
         </a>
       </div>
diff --git a/docs/templates/logo.hbs b/docs/templates/logo.hbs
index 5ef54e0..695a556 100644
--- a/docs/templates/logo.hbs
+++ b/docs/templates/logo.hbs
@@ -3,21 +3,21 @@
   <h3 class="hd-xxs sg-label">Dat Data Logo</h3>
   <div class="sg-subsection">
     <p>
-      <img src="downloads/dat-logo.svg" alt="Dat Data Logo" class="sg-subsection__img" />
+      <img src="blob/master/downloads/dat-logo.svg" alt="Dat Data Logo" class="sg-subsection__img" />
       This is the Dat logo. Only use it when it can be displayed at least 60px tall, in order to keep the text legible.
     </p>
     <p>
-      <a href="downloads/dat-logo.svg">Download .svg</a> | <a href="downloads/dat-logo.png">Download .png</a>
+      <a href="blob/master/downloads/dat-logo.svg">Download .svg</a> | <a href="blob/master/downloads/dat-logo.png">Download .png</a>
     </p>
   </div>
   <h3 class="hd-xxs sg-label">Dat Hexagon</h3>
   <div class="sg-subsection">
     <p>
-      <img src="downloads/dat-hexagon.svg" alt="Dat Hexagon" class="sg-subsection__img" />
+      <img src="blob/master/downloads/dat-hexagon.svg" alt="Dat Hexagon" class="sg-subsection__img" />
       Use the plain hexagon without text when the logo is displayed in small sizes, e.g. in small header bars or favicons.
     </p>
     <p>
-      <a href="downloads/dat-hexagon.svg">Download .svg</a> | <a href="downloads/dat-hexagon.png">Download .png</a>
+      <a href="blob/master/downloads/dat-hexagon.svg">Download .svg</a> | <a href="blob/master/downloads/dat-hexagon.png">Download .png</a>
     </p>
   </div>
 </div>