cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

A realistic-looking CSS mug that is supposed to be read as “I ❤️ ICON FONTS”, but the point here is to show what happens when icon fonts fail to be loaded. 😉

I was inspired to create this after finding images of “I □ UNICODE” shirts and mugs and seeing a □ for every icon in TweetDeck a few times, learning they belonged to an icon font. I believed this would suit icon fonts very well.

No images (except the SVG text) used here! I drew the mug shape in CSS and used SVG only for the warped text (produced in Illustrator).


  1. Hahaha omg I LOVE it. I want one.

  2. Amazing !!! :o

  3. Great! Where can I buy it?

  4. This would actually be pretty cool to have

  5. I would buy this mug. Ha!

  6. Scrolling this morning, this made me legit laugh. Love it!

  7. This is great! Great job and very creative.

  8. @maddesigns Well, you can go to CustomInk and find a white mug that looks like the one in the Pen to get it printed on. Here’s my original unmodified pattern you can use:


    Have fun!

  9. super clever!

  10. So funny. I want one!

  11. HAHHAHA hilarious!!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.