Repolode
Enviar
oreo-design

oreo-design/doodle-icons

Conjunto gratuito de 204 iconos SVG dibujados a mano, con licencia MIT, que se dibujan y se mueven, y con componentes de React.

Ver en GitHubSitio web
Estrellas
149
Forks
6
Issues abiertos
0
Último commit
hace 3 días

¿Qué es?

Oreo Doodle Icons es una biblioteca de 204 iconos compuestos solo por trazos, dibujados con un estilo deliberadamente tembloroso. Cada icono está disponible como SVG estático o animado: en este último, los trazos se dibujan y luego siguen temblando. Se pueden usar mediante un paquete de React o como archivos independientes en cualquier página compatible con SVG.

El efecto de temblor se consigue con un único filtro SVG, no con videos ni hojas de sprites. El ruido de turbulencia desplaza los trazos y una animación de seis pasos modifica la semilla del ruido en bucle, de modo que las líneas saltan entre fotogramas en vez de deslizarse. Como el efecto se aplica a píxeles rasterizados, su costo no aumenta con la cantidad de trazados de un icono, y un mismo filtro puede servir para todos los iconos de una página.

Los componentes de React aceptan un nombre o los datos sin procesar del icono, el tamaño, el grosor del trazo y propiedades para controlar los tiempos de dibujo, y reenvían los demás atributos al SVG. Los trazos usan currentColor, por lo que el color se define con CSS. El paquete no tiene dependencias de ejecución, incluye versiones ESM y CJS y definiciones de tipos, además de una skill opcional para agentes de programación con IA.

Funciones clave

  • 01204 iconos compuestos solo por trazos, en una cuadrícula de 48×48 y con estilo dibujado a mano
  • 02Variante SVG animada que dibuja los trazos y luego sigue temblando
  • 03Filtro SVG compartido para el temblor, configurable en amplitud, duración y frecuencia
  • 04Componentes de React con propiedades para el tamaño, el grosor del trazo y los tiempos de dibujo
  • 05Los trazos usan currentColor, así que los iconos toman el color de CSS
  • 06Sin dependencias de ejecución, con ESM, CJS y tipos de TypeScript

Casos de uso

  • Añadir iconos lúdicos dibujados a mano a un sitio de marketing o una landing page
  • Decorar páginas de temporada o temáticas, como las de cumpleaños o festividades
  • Usar los archivos SVG directamente en HTML estático, sin un paso de compilación
  • Dar indicaciones a un agente de programación con IA para crear interfaces con estilo de garabatos

Inicio rápido

  1. 1

    Instala el paquete de React

    npm i @oreo-design/doodle-icons
  2. 2

    Monta boil filter una vez en la página

  3. 3

    Renderiza un icono con la prop boilId

Antes de usarlo

  • El conjunto Pro, que incluye más de 1.700 iconos adicionales, es de pago y no está incluido en este repositorio.
  • El efecto Wiggle tiene un estilo fijo, por lo que puede no encajar con todos los diseños.
  • Los iconos SVG estáticos se muestran en negro al cargarlos mediante una etiqueta img. Para cambiarles el color, hay que insertarlos en línea o usar el componente de React.

Temas

#icons#svg#react#animation#hand-drawn#design-system#typescript

Preguntas frecuentes

¿Qué es doodle-icons?
Conjunto gratuito de 204 iconos SVG dibujados a mano, con licencia MIT, que se dibujan y se mueven, y con componentes de React. Oreo Doodle Icons es una biblioteca de 204 iconos compuestos solo por trazos, dibujados con un estilo deliberadamente tembloroso. Cada icono está disponible como SVG estático o animado: en este último, los trazos se dibujan y luego siguen temblando. Se pueden usar mediante un paquete de React o como archivos independientes en cualquier página compatible con SVG.
¿doodle-icons es gratuito? ¿Qué licencia tiene?
doodle-icons es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿doodle-icons sigue mantenido?
Mantenimiento activo. El último commit de doodle-icons fue el 4 nov 2026.
¿Para qué puedo usar doodle-icons?
Añadir iconos lúdicos dibujados a mano a un sitio de marketing o una landing page Decorar páginas de temporada o temáticas, como las de cumpleaños o festividades Usar los archivos SVG directamente en HTML estático, sin un paso de compilación Dar indicaciones a un agente de programación con IA para crear interfaces con estilo de garabatos
¿Cómo se instala doodle-icons?
Instala el paquete de React: npm i @oreo-design/doodle-icons Monta boil filter una vez en la página Renderiza un icono con la prop boilId
¿Dónde consigo doodle-icons?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/oreo-design/doodle-icons

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados

tabler / tabler-icons

Colección gratuita de más de 6.200 iconos SVG con licencia MIT, diseñados en una cuadrícula de 24x24, con paquetes para React, Vue, Svelte, Angular y más.

Frontend y UI#icons#svg#icon-font
22,6 mil+58 esta semana1,3 milJavaScriptMITBien mantenidoActualizado hace 9 días