diff --git a/css/brands-extended.css b/css/brands-extended.css
index 61606ea..21d9770 100644
--- a/css/brands-extended.css
+++ b/css/brands-extended.css
@@ -94,6 +94,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Codepen */
+.button.button-codepen {
+  color: #0000;
+  background-color: #ffff;
+}
+.button.button-devpost:hover,
+.button.button-devpost:focus {
+  filter: brightness(90%);
+}
+
 /* Devpost */
 .button.button-devpost {
   color: #ffffff;
diff --git a/images/icons-extended/codepen.svg b/images/icons-extended/codepen.svg
new file mode 100644
index 0000000..de8331c
--- /dev/null
+++ b/images/icons-extended/codepen.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><g transform="matrix(1 0 0 -1 0 1008)"><path d="M989,664.5c0-0.6,0.2-1,0.5-1c0.3,0,0.5-0.3,0.5-1v-4.9V358.3v-4.9c0-0.6-0.2-1-0.5-1c-0.3,0-0.5-0.3-0.5-1v-3.9c-0.6,0-1-0.6-1-1.9c-0.6-0.6-1-1.6-1-2.9c-0.6-0.6-1-1.3-1-1.9l-1-1c-0.6-0.6-1-1.3-1-1.9c0-0.6-0.2-1-0.5-1c-0.3,0-0.5-0.3-0.5-1l-1-1c0-1.3-0.3-1.9-1-1.9l-1-1c-1.3-1.3-1.9-2.3-1.9-2.9c-1.3,0-1.9-0.6-1.9-1.9c-0.6,0-1.6-0.6-2.9-1.9c-0.6-0.6-1.3-1-1.9-1v-1L523.3,24.8c-6.5-4.5-14.3-6.8-23.3-6.8c-9.1,0-16.9,2.3-23.3,6.8L28.5,323.3v1l-1.9,1c-1.3,1.3-2.3,1.9-2.9,1.9c0,1.3-0.6,1.9-1.9,1.9c0,0.6-0.6,1.6-1.9,2.9l-1,1c-0.6,0-1,0.3-1,1c0,0.6-0.3,1.3-1,1.9c0,0.6-0.2,1-0.5,1s-0.5,0.3-0.5,1c0,0.6-0.3,1-1,1l-1,1.9c0,0.6-0.3,1.3-1,1.9c0,1.3-0.3,2.3-1,2.9c0,1.3-0.3,1.9-1,1.9v3.9c0,0.6-0.2,1-0.5,1c-0.3,0-0.5,0.3-0.5,1v4.9v299.4v4.9c0,0.6,0.2,1,0.5,1c0.3,0,0.5,0.3,0.5,1v3.9c0.6,0,1,0.6,1,1.9c0.6,0.6,1,1.6,1,2.9c0.6,0.6,1,1.3,1,1.9l1,1c0.6,0.6,1,1.3,1,1.9c0,0.6,0.2,1,0.5,1s0.5,0.3,0.5,1l1,1c0,1.3,0.3,1.9,1,1.9l1,1c1.3,1.3,1.9,2.3,1.9,2.9c1.3,0,1.9,0.6,1.9,1.9c0.6,0,1.6,0.6,2.9,1.9c0.6,0.6,1.3,1,1.9,1v1l448.2,298.5c15.6,9.1,31.1,9.1,46.7,0l448.2-298.5v-1l1.9-1c1.3-1.3,2.3-1.9,2.9-1.9c0-1.3,0.6-1.9,1.9-1.9c0-0.6,0.6-1.6,1.9-2.9l1-1c0.6,0,1-0.3,1-1c0-0.6,0.3-1.3,1-1.9c0-0.6,0.2-1,0.5-1c0.3,0,0.5-0.3,0.5-1c0-0.6,0.3-1,1-1l1-1.9c0-0.6,0.3-1.3,1-1.9c0-1.3,0.3-2.3,1-2.9c0-1.3,0.3-1.9,1-1.9V664.5z M500,408.8L648.8,508L500,607.2L351.2,508L500,408.8z M458.2,681.1v196.4L127.6,657.7l147.8-99.2L458.2,681.1z M199.6,508l-105,70V438L199.6,508z M275.4,457.4l-147.8-99.2l330.6-219.7v196.4L275.4,457.4z M541.8,334.9V138.6l330.6,219.7l-147.8,99.2L541.8,334.9z M800.4,508l105-70v140L800.4,508z M724.6,558.6l147.8,99.2L541.8,877.4V681.1L724.6,558.6z"/></g></g>
+</svg>
\ No newline at end of file
diff --git a/preview.html b/preview.html
index 3cb8963..bc5a215 100644
--- a/preview.html
+++ b/preview.html
@@ -102,6 +102,11 @@
             <img class="icon" src="images/icons-extended/behance.svg" alt="Behance Logo">Behance</a>
         <br>
 
+        <!-- Codepen -->
+        <a class="button button-behance" href="#" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons-extended/codepen.svg" alt="Codepen Logo">Codepen</a>
+        <br>
+
         <!-- Distiller -->
         <a class="button button-dist" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/distiller.svg" alt="Distiller Logo">Distiller</a>