Doodle Icons

Doodle Icons

152 stroke-only icons drawn with a deliberately shaky hand, in a 48×48 grid. Two things make them feel alive. Both are props rather than defaults, because the package cannot know which element on your page is an icon and which is a control — but on a page built with this set, every icon should carry boilId:

• draw — strokes draw themselves on, one after another, on first paint
• boil — the ink keeps wobbling forever. Animators call this a boiling line: hand-redrawn frames never land in quite the same place, so the outline simmers even when nothing moves. Here it is one shared SVG filter, not a video or sprite sheet, so 200 boiling icons cost about what one does.

The set is designed to look like one hand drew everything. Most of the rules below exist to protect that: same stroke weight everywhere, same ink, one tuning for the wobble, and no icons from other sets mixed in.

Reference for how it should look and feel: https://oreoui.com/doodle-icons

Install and wire up (once)

npm i @oreo-design/doodle-icons

React 18+ is an optional peer. Mount the filter once, as high as possible, in the same document as the icons (not in a separate iframe or shadow root):

// Next.js App Router: app/layout.tsx  (it is a plain server-safe component, no hooks)
import { BoilFilter } from '@oreo-design/doodle-icons'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <BoilFilter id="boil" />
        {children}
      </body>
    </html>
  )
}

<BoilFilter> renders an invisible <svg><filter> plus the keyframes the draw entrance needs. Icons reference it by id. Do not mount one per icon: the whole point is that every icon on the page shares a single displacement map. If you want the draw-on entrance with no wobble at all, mount <DoodleStyles /> instead (keyframes only).

Use an icon

import { DoodleIcon } from '@oreo-design/doodle-icons'

<DoodleIcon name="heart" />                          // still, 24px, currentColor
<DoodleIcon name="star" boilId="boil" />             // wobbles forever
<DoodleIcon name="bulb" boilId="boil" draw />        // draws on, then wobbles
<DoodleIcon name="check" size={32} />                // still, bigger

Anything else is forwarded to the <svg> (className, aria-hidden, style…).

Because an unknown name renders nothing rather than throwing, always pick names from the list in this file, or check first:

import { getIcon, ICON_NAMES } from '@oreo-design/doodle-icons'
getIcon('settings')   // undefined — there is no "settings"; use "gear"

Colour

Strokes are currentColor. Set color on the icon or a parent; never pass a stroke attribute per icon, and never recolour by editing path data.

<span style={{ color: '#2b2a33' }}><DoodleIcon name="pencil" /></span>
<DoodleIcon name="flame" className="text-[#f97316]" />   {/* crayon orange, not a framework hue */}

draw replays on remount

The entrance runs every time the component mounts. That is right for a hero or an empty state; it is wrong for list rows, table cells, or anything that re-renders as data changes, where the icons would keep redrawing. On those, leave draw off.

The house rules (this is what makes it look like the site)

What wiggles, and what does not

The line is not "important things wiggle, small things hold still." It is about what the drawing is:

Ink wiggles. Every icon on the page gets boilId, wherever it sits — the hero, a settings row, a nav bar, a dense grid. The whole point of the set is that the drawings are alive; an icon that holds still while its neighbours boil looks broken, and a page where only the hero moves looks like the rest of the UI came from somewhere else. One shared filter means the cost is flat, so there is no performance reason to hold back either.

Display type wiggles too. This is the piece most people miss. On oreoui.com every Schoolbell heading carries the same filter as the icons — the h1, the section headings, the button labels. Handwriting that sits perfectly still next to boiling icons is the single fastest way to make a page look half-done.

{/* the same filter the icons use, on the text */}
<h1 style={{ filter: 'url(#boil)' }} className="font-doodle text-8xl">
  Paper Moon
</h1>

Body copy in Inter or Fragment Mono stays still — the boil belongs to the hand-drawn voice, and a wobbling paragraph is just hard to read.

Controls do not wiggle. A toggle, a button, a checkbox, an input, a card: drawn by the same hand (see below), but held still. A control that squirms while you are trying to hit it feels broken rather than charming, and it is the one place where the joke costs the user something.

draw is separate. The stroke-on entrance replays every time a component mounts, so keep it for things that mount once — a hero, an empty state, an onboarding step. Leave it off in list rows and table cells, which re-render as data changes and would redraw themselves forever.

Sizes and stroke

An icon should look like it was drawn by the same hand that wrote the text next to it, so size it against that text rather than against a fixed list:

• 24 inline with body text, list rows, buttons with text
• 32 cards, icon-only buttons, section headers
• 48 feature blocks, empty states
• in a hero, follow the headline. Whatever size the display type lands at, the icons should read as part of the same drawing — next to a headline over 100px, a 48px icon looks like a mistake, a row of tiny stickers under a billboard. Sizing with CSS width (w-20 sm:w-24, h-auto) rather than the size prop is fine and gives you responsive scaling for free.

Below ~20px the strokes fuse. If a spot truly needs 16px icons, that spot is probably not a doodle-icons spot; leave it to text or a plain glyph rather than shrinking these.

Do not change strokeWidth, and do not mix in icons from another set (Lucide, Heroicons, Font Awesome…) in the same view. One geometric icon next to these reads as a bug, not a choice. If an icon does not exist here, use a word instead (see "when there is no icon").

Palette

The set was drawn on warm paper with dark ink:

import { INK } from '@oreo-design/doodle-icons'   // '#2b2a33'
// paper (page background): #F7F6F2

Default the icons to ink on paper. Pure black #000 and pure white backgrounds look harsher than the drawings want.

Accent colours are welcome — the site uses a crayon box for play — but keep it to one or two per composition, and put them on decorative icons rather than on controls. These are the seven the site lets people recolour icons with, if you want ones that belong:

#e5484d  #f97316  #f5b301  #30a46c  #00a2c7  #3e63dd  #8e4ec6

Colour is for play, not for state. The one rule worth holding: on, selected, primary and filled are all ink #2b2a33. A filled button is black. A selected tab is black. A toggle that is on is black. If you find yourself reaching for bg-blue-500, bg-indigo-600, or any framework default accent, stop — that colour is nowhere in this world, and it reads instantly as a stock component dropped into a handmade page.

Typography

Three families, three jobs:

--font-doodle: 'Schoolbell';       /* display only: h1, section headings, buttons */
--font-sans:   'Inter';            /* body, labels, anything read at length */
--font-mono:   'Fragment Mono';    /* supporting copy, captions, code */

Schoolbell is the voice, not the body. It goes on the big line and on button labels; it never goes on a paragraph, a form label, or a table cell, where a handwriting face costs real legibility.

Sizes are yours to judge. There is no house type scale to obey here — size the type to the page you are building. A landing page whose headline is the whole design should have a huge headline; a dense settings screen should not.

Schoolbell is not part of the package and must not be bundled; it is free on Google Fonts under the SIL Open Font License.

// Next.js
import { Schoolbell, Inter } from 'next/font/google'
const schoolbell = Schoolbell({ subsets: ['latin'], weight: '400', variable: '--font-doodle' })
const inter = Inter({ subsets: ['latin'], variable: '--font-sans' })
// put both .variable on <html>, then: h1 { font-family: var(--font-doodle) }

<!-- plain HTML -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Schoolbell&family=Inter:wght@100..900&display=swap" rel="stylesheet">

If the site already has a display font the user cares about, keep theirs. Schoolbell is the house default, not a requirement.

Build what was asked for, and stop

A handmade page earns its charm from restraint. If the request is a headline, a line of copy and a few icons, build exactly that — resist adding an eyebrow kicker, a call-to-action button, a badge, or a stat row that nobody asked for. The examples further down show how a button or a card is drawn when you need one; they are not a shopping list.

Controls have to be drawn too

This is the rule agents miss most, and it is the one that gives the whole thing away. Hand-drawn icons sitting inside a stock Tailwind toggle or a crisp rounded-lg card look like clip-art pasted into someone else's UI. If an icon on the screen is hand-drawn, the things around it have to be hand-drawn too. They just do not wiggle (see above).

There are two techniques, and picking the wrong one is why hand-drawn controls usually come out wrong.

For a box that holds content — a button, a tab, a badge, a chip — an uneven border-radius is enough. The label is what you look at; the box is just a container.

.doodle-radius {
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
}

Those radii are huge on purpose. When their sum exceeds the box, the browser scales all four down to fit, so this only reads correctly above roughly 80px wide. Do not reach for it on something small.

{/* primary button — ink fill, Schoolbell label, tilts on hover */}
<button className="doodle-radius bg-[#2b2a33] px-5 py-2 font-doodle text-[17px]
  text-[#fffefb] transition-transform duration-300 hover:-rotate-1 hover:scale-[1.03]
  active:scale-[0.97]">
  Star on GitHub
</button>

{/* disabled / waiting — subtle wash, muted ink, no tilt */}
<span className="doodle-radius bg-black/5 px-5 py-2 font-doodle text-[17px] text-black/45">
  Discord opening soon
</span>

{/* card — plain even corners, warm surface, soft shadow, tilts a hair on hover */}
<div className="rounded-2xl bg-[#fffefb] p-6 shadow-[0_4px_16px_#0000000f]
  transition-[transform,box-shadow] duration-300
  hover:-translate-y-0.5 hover:rotate-[-0.6deg] hover:shadow-[0_8px_22px_#00000014]" />

Cards keep ordinary even corners: a big surface with four wild corners reads as a blob rather than as a drawing.

For a control whose shape is the thing — a toggle, a checkbox, a radio, a slider handle — border-radius cannot save you. It draws mathematically perfect arcs, and perfect arcs are exactly what a hand does not make. Draw the control the way the icons are drawn: as SVG paths, with the same 3.4 stroke, round caps, and slightly wobbly béziers.

Look at how the set draws a rounded rectangle (tablet) and a circle (circle) and copy the hand:

tablet  M 12.5 10 C 20 9.1, 28 9.2, 34.6 10 C 35.6 16.5, 35.7 23.6, 35 30 …
circle  M 24 9 C 32.6 8.8, 39 15, 39 23.8 C 39 32.4, 32.7 38.8, 24.1 38.9 …

Neither uses an arc. The rectangle is four cubics that bow outward a little in the middle and turn softly at the corners; the circle is four cubics whose endpoints sit slightly off the true circle. That asymmetry is the whole effect.

A toggle built that way — track and knob both as paths, ink fill when on so the state reads at a glance, held still:

const TRACK = 'M 12.8 3.2 C 21 2.5, 30.2 2.8, 34.6 3.6 C 40.6 4.6, 43.6 8.2, 43.2 13.3 C 42.9 18.2, 39.7 22.4, 34.2 22.9 C 26.8 23.6, 18.6 23.3, 12.6 22.6 C 6.8 21.9, 3.1 17.7, 3.4 12.8 C 3.7 7.6, 7 3.8, 12.8 3.2 Z'
const KNOB  = 'M 13.2 6.1 C 17.1 6.3, 20 9.2, 19.8 13.1 C 19.6 16.9, 16.6 19.8, 12.8 19.6 C 9 19.4, 6.2 16.4, 6.4 12.6 C 6.6 8.8, 9.4 6, 13.2 6.1 Z'

<button role="switch" aria-checked={on} onClick={toggle}>
  <svg width="46" height="26" viewBox="0 0 46 26" fill="none" stroke="#2b2a33"
       strokeWidth={3.4} strokeLinecap="round" strokeLinejoin="round">
    <path d={TRACK} fill={on ? '#2b2a33' : 'none'} />
    <path d={KNOB} transform={on ? 'translate(24 0)' : undefined}
          fill={on ? '#fffefb' : '#2b2a33'} stroke={on ? '#fffefb' : '#2b2a33'} />
  </svg>
</button>

The on state fills the track with ink because a switch has to be readable at a glance — a purely outlined toggle is prettier but you cannot tell at a skim which rows are on, and that is a real cost to the person using it.

Borrow behaviour and accessibility from a headless library if you like — the site uses HeroUI for exactly that — but draw the surface yourself. There is no @oreo-design/ui package yet, so build the control in the project. Do not reach for shadcn, Material, or stock Tailwind component snippets: they bring their own radius, their own accent hue, and their own idea of what a control looks like, and the page stops looking handmade.

Whatever you draw, the motion on hover is a slight rotation, a degree or less, plus a small scale. Nothing on this site slides or fades on hover; it tilts, the way a paper sticker shifts when you press it.