Repolode
Enviar
oreo-design

oreo-design/doodle-icons

Conjunto gratuito de 204 ícones SVG desenhados à mão, com licença MIT, que se desenham e ficam balançando, com componentes React.

Ver no GitHubSite
Estrelas
149
Forks
6
Issues abertas
0
Último commit
anteontem

O que é?

Oreo Doodle Icons é uma biblioteca com 204 ícones apenas de traços, desenhados de propósito com um aspecto irregular, como se fossem feitos à mão. Cada ícone está disponível como SVG estático ou animado, que desenha os traços e depois continua balançando. Os mesmos ícones podem ser usados pelo pacote React ou como arquivos simples em qualquer página que aceite SVG.

O efeito de balanço vem de um único filtro SVG, sem usar vídeos ou sprite sheets. O ruído de turbulência desloca os traços, e uma animação de seis etapas avança o seed do ruído em loop, fazendo as linhas saltarem entre os quadros em vez de deslizarem. Como o efeito é aplicado aos pixels rasterizados, seu custo não aumenta com o número de caminhos de um ícone, e um único filtro atende todos os ícones da página.

Os componentes React aceitam um nome ou os dados brutos do ícone, além de propriedades para tamanho, largura do traço e tempo da animação de desenho, e repassam os demais atributos ao SVG. Os traços usam currentColor, então a cor é definida pelo CSS. O pacote não tem dependências em runtime, inclui ESM, CJS e definições de tipos, além de oferecer uma skill opcional para agentes de programação com IA.

Recursos principais

  • 01204 ícones compostos apenas por traços, em uma grade de 48×48 e com aparência de desenho à mão
  • 02Versão em SVG animado que desenha os traços e depois continua balançando
  • 03Filtro SVG compartilhado para o efeito de balanço, com amplitude, duração e frequência configuráveis
  • 04Componentes React com props para tamanho, largura do traço e tempo da animação de desenho
  • 05Os traços usam currentColor, então os ícones herdam a cor do CSS
  • 06Sem dependências em runtime, com ESM, CJS e tipos do TypeScript

Casos de uso

  • Adicionar ícones divertidos desenhados à mão a um site de marketing ou landing page
  • Decorar páginas sazonais ou temáticas, como as de aniversários ou feriados
  • Usar os arquivos SVG diretamente em HTML estático, sem uma etapa de build
  • Orientar um agente de programação com IA na criação de interfaces com estilo de doodle

Início rápido

  1. 1

    Instale o pacote React

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

    Monte o boil filter uma vez na página

  3. 3

    Renderize um ícone com a prop boilId

Antes de usar

  • O conjunto Pro, com mais de 1.700 ícones extras, é pago e não está incluído neste repositório.
  • O efeito Wiggle tem um estilo fixo, então pode não combinar com todos os designs.
  • Os ícones SVG estáticos são renderizados em preto quando carregados por uma tag img. Para mudar a cor, é preciso inseri-los em linha ou usar o componente React.

Tópicos

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

Perguntas frequentes

O que é doodle-icons?
Conjunto gratuito de 204 ícones SVG desenhados à mão, com licença MIT, que se desenham e ficam balançando, com componentes React. Oreo Doodle Icons é uma biblioteca com 204 ícones apenas de traços, desenhados de propósito com um aspecto irregular, como se fossem feitos à mão. Cada ícone está disponível como SVG estático ou animado, que desenha os traços e depois continua balançando. Os mesmos ícones podem ser usados pelo pacote React ou como arquivos simples em qualquer página que aceite SVG.
doodle-icons é gratuito? Qual é a licença?
doodle-icons é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
doodle-icons ainda é mantido?
Manutenção ativa. O último commit de doodle-icons foi em 4 de nov. de 2026.
Para que posso usar doodle-icons?
Adicionar ícones divertidos desenhados à mão a um site de marketing ou landing page Decorar páginas sazonais ou temáticas, como as de aniversários ou feriados Usar os arquivos SVG diretamente em HTML estático, sem uma etapa de build Orientar um agente de programação com IA na criação de interfaces com estilo de doodle
Como instalar doodle-icons?
Instale o pacote React: npm i @oreo-design/doodle-icons Monte o boil filter uma vez na página Renderize um ícone com a prop boilId
Onde consigo doodle-icons?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/oreo-design/doodle-icons

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados