css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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!

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

You must be logged in to comment.