Radical Icons

A growing library of radical, hand-drawn SVGs by Jack McDade. These suckers are meticulously optimized for the modern web and will spice up literally anything (except food).

Retro Delights

Image
bolt-1-hollow
Image
bolt-1-solid
Image
bolt-2-hollow
Image
bolt-2-solid
Image
bomb
Image
boombox
Image
cassette
Image
city
Image
controller-1
Image
controller-2
Image
cool-s-fat
Image
cool-s-thin
Image
diamond
Image
eject
Image
floppy-disk
Image
gameboy
Image
heart
Image
joystick
Image
pyramid-inverted
Image
pyramid
Image
retro-sun-1
Image
retro-sun-2
Image
retro-sun-3
Image
retro-sun-4
Image
retro-sunset-1
Image
retro-sunset-2
Image
skateboard
Image
slink-2
Image
slinky-1
Image
sun-and-birds
Image
sunglasses
Image
sunrise
Image
swirl
Image
sword
Image
wave
Image
yoyo

Seasonal

Image
jack-o-lantern-1
Image
jack-o-lantern-2
Image
skull-1
Image
skull-2
Image
skull-3

Circles

Image
circle-1-bubbly
Image
circle-1-dashed
Image
circle-1-dotted
Image
circle-1-hashy
Image
circle-1-rake
Image
circle-1-slashy
Image
circle-1-solid
Image
circle-1-spikey
Image
circle-1-sputter
Image
circle-1-ticky
Image
circle-1-zaggy
Image
circle-1-ziggy
Image
circle-2-bubbly
Image
circle-2-dashed
Image
circle-2-dotted
Image
circle-2-hashy
Image
circle-2-rake
Image
circle-2-slashy
Image
circle-2-solid
Image
circle-2-spikey
Image
circle-2-sputter
Image
circle-2-ticky
Image
circle-2-zaggy
Image
circle-2-ziggy

Slashes

Image
slash-brush-1-left
Image
slash-brush-1-right
Image
slash-brush-2-left
Image
slash-brush-2-right
Image
slash-brush-3-left
Image
slash-brush-3-right
Image
slash-loopy-1
Image
slash-loopy-2
Image
slash-loopy-3
Image
slash-swirly-1
Image
slash-wave
Image
slash-ziggy-1
Image
slash-ziggy-2
Image
slash-ziggy-3
Image
slash-ziggy-4
Image
swash-1
Image
x-brush

Lines

Image
loopy-dashed
Image
loopy-fat
Image
loopy-rake
Image
loopy-slashy
Image
loopy-solid
Image
loopy-sputter
Image
straight-dashed
Image
straight-dotted
Image
straight-fat
Image
straight-solid
Image
straight-sputter
Image
straight-zaggy
Image
straight-ziggy
Image
wiggly-1-dashed
Image
wiggly-1-dotted
Image
wiggly-1-rake
Image
wiggly-1-solid
Image
wiggly-1-sputter
Image
wiggly-2-dashed
Image
wiggly-2-dotted
Image
wiggly-2-fat
Image
wiggly-2-slashy
Image
wiggly-2-slashy_1
Image
wiggly-2-sputter

Arrows

Image
arrow-short-dashed
Image
arrow-short-dotted
Image
arrow-short-fat
Image
arrow-short-solid
Image
arrow-short-sputter
Image
arrow-short-zaggy
Image
arrow-straight-dashed-solid
Image
arrow-straight-dotted-solid
Image
arrow-straight-solid
Image
arrow-straight-solid_1
Image
arrow-straight-sputter-solid
Image
arrow-straight-ziggy-solid
Image
arrow-wiggly-dashed-hollow
Image
arrow-wiggly-dashed-solid
Image
arrow-wiggly-solid-hollow
Image
arrow-wiggly-solid-solid
Image
arrow-wiggly-sputter-hollow
Image
arrow-wiggly-sputter-solid
Image
arrowhead-hollow
Image
arrowhead-line-sharp
Image
arrowhead-line-soft
Image
arrowhead-solid
Image
turny-dashed
Image
turny-dotted
Image
turny-fat
Image
turny-solid
Image
turny-sputter
Image
turny-zaggy

Corners

Image
corner-dashed-bl
Image
corner-dashed-br
Image
corner-dashed-tl
Image
corner-dashed-tr
Image
corner-solid-bl
Image
corner-solid-br
Image
corner-solid-tl
Image
corner-solid-tr
Image
corner-sputter-bl
Image
corner-sputter-br
Image
corner-sputter-tl
Image
corner-sputter-tr
Image
corner-ziggy-bl
Image
corner-ziggy-br
Image
corner-ziggy-tl
Image
corner-ziggy-tr

How to use

In Your Code

Every icon in this library is built without height and width attributes and uses fill="currentColor" so you can recolor, resize, and style them on the fly with CSS.

For example, in Statamic you can do this:

{{ svg
src="rad/bolt-1"
class="h-24 w-12 text-neon-yellow"
}}

Check out this awesome tutorial on working with SVGs from the TailwindCSS crew, or this one from CSS Tricks.

In Your Designs

These SVGs are perfectly optimized for the browser, but sometimes don't load correctly in Illustrator, Sketch, Figma, Adobe XD, other design tools. I'm working on a separate export of the icons for use in design apps. ✌🏻

See 'Em In Action

Check out Radical Design Course, Statamic, and my personal site to see how I use icons like this in practice.

Designed and copyrighted by @jackmcdade.

Radical Icons - Hand-drawn SVGs meticulously optimized for the modern web. | Product Hunt