Fuentes

Tabler Icons

Colección open source de iconos SVG consistente y extensa.

Set de iconos de interfaz con trazos configurables, paquetes para frameworks, fuente de iconos y recursos SVG individuales.

Ir al sitio oficial

Muestrario tipográfico

Fuentes del sitio y ejemplos servidos por Google Fonts.

  • Bricolage GrotesqueSitio · display

    Hago cosas. Algunas hasta funcionan.

  • GeistSitio · cuerpo

    Laboratorio, repositorio y proyectos en un solo lugar.

  • FrauncesGoogle Fonts

    Titulares con carácter editorial.

  • DM SansGoogle Fonts

    Interfaz limpia y legible en pantalla.

  • JetBrains MonoGoogle Fonts

    const repo = 'marcparra.tech';

Muestrario de iconos

Trazo uniforme 24×24 con Lucide, como en la interfaz del sitio.

  • Buscar
  • Capas
  • Código
  • Datos
  • Carpeta
  • Ajustes
  • Detalle
  • Tipografía

Iconografía funcional del repositorio

Ficha abierta

Para qué sirve y cómo encaja

Set de iconos de interfaz con trazos configurables, paquetes para frameworks, fuente de iconos y recursos SVG individuales.

Encaja en dashboards y aplicaciones que requieren muchos pictogramas con un lenguaje visual uniforme.

No es la mejor elección si se busca una identidad muy diferenciada o iconos filled como lenguaje principal.

Uso en tu proyecto

Instalación e importación

Comandos y fragmentos tomados de la documentación oficial. Elige tu caso, cópialos tal cual o pásale el prompt a tu agente.

npm
npm install @tabler/icons-webfont
uso
@import "@tabler/icons-webfont/dist/tabler-icons.min.css";

<!-- <i class="ti ti-search"></i> -->

Prompt para que tu agente lo instale

Pega esto en Cursor, Claude Code, Codex u otro agente de código:

Prompt
Instala Tabler Icons en este proyecto (contexto: sin framework). Documentación oficial: https://docs.tabler.io/icons/libraries/react. Comando verificado: `npm install @tabler/icons-webfont`. Haz solo la instalación o importación base indicada en esta pestaña; no asumas stack ni configuración del proyecto. Cuando termines, pregunta al usuario cómo quiere integrarlo o qué contexto necesitas para los siguientes pasos.

Planes y modelos

Cómo se paga y qué incluye cada opción

  1. 01

    Open source

    Licencia MIT para el set completo y para los paquetes de React, Vue, Svelte y webfont.

    Gratis

Funcionalidades

Qué puedes hacer con ella

  1. 01

    Catálogo amplio

    Cubre navegación, acciones, objetos, tecnología y estados.

  2. 02

    SVG configurables

    Permite ajustar tamaño, color y grosor de trazo.

  3. 03

    Integraciones

    Dispone de paquetes y componentes para distintos frameworks.

Cuándo usarla

Dónde encaja y dónde no

Te conviene si…

Encaja en dashboards y aplicaciones que requieren muchos pictogramas con un lenguaje visual uniforme.

Mejor otra opción si…

No es la mejor elección si se busca una identidad muy diferenciada o iconos filled como lenguaje principal.