diff --git a/src/assets/cuadrados/alfabetizaciones.svg b/src/assets/cuadrados/alfabetizaciones.svg
new file mode 100644
index 0000000..ab879c7
--- /dev/null
+++ b/src/assets/cuadrados/alfabetizaciones.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.335 41.859"><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".70556" d="m12.29.353 23.756 41.154M36.046.353 12.29 41.507M.41 20.93h47.516M39.607 6.518 36.047.353h-6.47M44.514 26.843l3.414-5.913-3.203-5.547M19.34.353h-7.052L8.874 6.265M3.756 15.13l-3.349 5.8 3.56 6.165M29.577 41.507h6.47l3.349-5.8M19.34 41.507h-7.052L9.085 35.96"/></svg>
\ No newline at end of file
diff --git a/src/assets/cuadrados/cara de lapiz.svg b/src/assets/cuadrados/cara de lapiz.svg
new file mode 100644
index 0000000..4fcb1fd
--- /dev/null
+++ b/src/assets/cuadrados/cara de lapiz.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.372 40.564"><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".70556" d="M43.97 40.211H.354v-5.348H43.97zM44.103 40.251l4.578-2.715-4.573-2.71M29.32 8.875a8.522 8.522 0 1 1 17.044 0 8.522 8.522 0 0 1-17.044 0ZM37.842 3.91v9.93M32.878 8.875h9.93M.353 8.875a8.522 8.522 0 1 1 17.044 0 8.522 8.522 0 0 1-17.044 0ZM12.386 5.364l-7.022 7.022M5.364 5.364l7.022 7.022"/></svg>
\ No newline at end of file
diff --git a/src/assets/cuadrados/datos.svg b/src/assets/cuadrados/datos.svg
new file mode 100644
index 0000000..ade5688
--- /dev/null
+++ b/src/assets/cuadrados/datos.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.972 51.436"><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".70556" d="M3.716 0v51.436M49.972 46.682H0M3.716 36.417s.995-.663 2.22-.384c1.227.279 1.728 1.174 3.43-.37 1.357-1.232 2.455-.308 3.109-.148.653.16 1.768.997 2.82-.798.965-1.65 1.96-1.515 3.064-.359 1.103 1.157 1.553.718 2.533-1.316.981-2.033 1.676-3.429 2.82-1.116 1.144 2.313 1.634 3.31 2.86-.957 1.226-4.266 1.716-5.701 2.983-1.276 1.267 4.426 1.839 3.23 2.901-2.272 1.063-5.503 1.471-8.585 2.902-1.123 1.43 7.462 2.083 4.591 2.86-3.183.776-7.776 1.798-10.327 2.942-.997 1.144 9.33 1.92 8.692 2.82-3.589.898-12.28 2.329-12.36 2.942-.678"/></svg>
\ No newline at end of file
diff --git a/src/assets/cuadrados/escuelas.svg b/src/assets/cuadrados/escuelas.svg
new file mode 100644
index 0000000..fc9e08b
--- /dev/null
+++ b/src/assets/cuadrados/escuelas.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.031 48.115"><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".70556" d="M47.678 47.763H.353V.353h47.325Z"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".70556" d="M16.172 47.754V32.005h15.75v15.75M39.664 47.754V23.878M8.394 23.878v23.876M24.047.396v47.358"/><path fill="none" stroke="#000" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width=".70556" d="m39.765 24.092-15.75-11.908L8.268 24.092Z"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".70556" d="M.353 12.184h47.325M39.765.353v6.55h-15.75"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".70556" d="M47.678 47.763H.353V.353h47.325Z"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".70556" d="M16.172 47.754V32.005h15.75v15.75M39.664 47.754V23.878M8.394 23.878v23.876M24.047.396v47.358"/><path fill="none" stroke="#000" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width=".70556" d="m39.765 24.092-15.75-11.908L8.268 24.092Z"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".70556" d="M.353 12.184h47.325M39.765.353v6.55h-15.75"/></svg>
\ No newline at end of file
diff --git a/src/index.11ty.jsx b/src/index.11ty.jsx
index a7e3508..bef4723 100644
--- a/src/index.11ty.jsx
+++ b/src/index.11ty.jsx
@@ -32,6 +32,15 @@ export async function render(data) {
   const LogoGrande = await loadSvg("src/assets/logo grande.svg");
   const IconosLanding = await loadSvg("src/assets/iconos landing.svg");
   const css = await tailwind();
+
+  const CuadradoAlfabetizaciones = await loadSvg(
+    "src/assets/cuadrados/alfabetizaciones.svg"
+  );
+  const CuadradoCaraDeLapiz = await loadSvg(
+    "src/assets/cuadrados/cara de lapiz.svg"
+  );
+  const CuadradoDatos = await loadSvg("src/assets/cuadrados/datos.svg");
+  const CuadradoEscuelas = await loadSvg("src/assets/cuadrados/escuelas.svg");
   //TODO: doctype
   return (
     <html lang="es">
@@ -135,12 +144,20 @@ export async function render(data) {
                   naranja: "bg-naranja xl:order-last",
                   violeta: "bg-violeta lg:order-last",
                 };
+                const iconos = {
+                  celeste: <CuadradoAlfabetizaciones class="w-32" />,
+                  amarillo: <CuadradoCaraDeLapiz class="w-32" />,
+                  naranja: <CuadradoDatos class="w-32" />,
+                  violeta: <CuadradoEscuelas class="w-32" />,
+                };
                 return (
                   <div class="grid lg:grid-cols-2">
                     <div
-                      class={`aspect-square h-auto w-full max-w-[24rem] overflow-y-auto ${classes[color]}`}
-                    ></div>
-                    <div class="aspect-square h-auto w-full max-w-[24rem] overflow-y-auto p-8">
+                      class={`aspect-square h-auto w-full max-w-[24rem] ${classes[color]} flex items-center justify-center`}
+                    >
+                      {iconos[color]}
+                    </div>
+                    <div class="aspect-square h-auto w-full max-w-[24rem] overflow-y-auto break-words p-8">
                       <h2 class="mb-4 text-4xl font-bold">{título}</h2>
                       <p class="text-2xl leading-6">{content}</p>
                     </div>