TW Fonts

A New Vectorized Font and Icon Library

111 icons and counting ...

Thanks - you're in!Now follow the creator on Facebook and Instagram

TW Fonts is a collection of vector icons that you can use on your website. Fully scalable, you can easily customize, style, and enlarge these icons without losing quality. See examples.

In addition to searching the icons below (many more in the works!), follow me on Facebook and send me a message if there's an icon that you'd like for me to create for you. I'll do it and then send you a link!

How to Get Started

1. Link your website to the TW-Fonts stylesheet

Copy/paste this link and put it somewhere in your website (like the header file).

<link rel="stylesheet" type="text/css" href="http://tylerewillis.com/fonts/tw-fonts.css">
<header>
  <link rel="stylesheet" type="text/css" href="http://tylerewillis.com/fonts/tw-fonts.css">
</header>

2. Select an Icon

Find an icon you like and copy the HTML code for the icon.

<i class='tw tw-rocket' aria-hidden="true"></i>

3. Place it in your website

Paste the HTML code where you'd like the icon to appear.

<div>
  <p><i class="tw tw-rocket" aria-hidden="true"></p>
</div>

Basic Icons

tw-rocket

You can place our icons anywhere just by including the CSS Prefix tw and the icon's name. It will inherit the styles of the container.

<i class="tw tw-rocket" aria-hidden="true"></i> tw-rocket

Larger Icons

tw-lg

tw-2x

tw-3x

tw-4x

tw-5x

The size of the icons can be increased relative to the container by adding special classes such as tw-lg, tw-2x, tw-3x, tw-4x, and tw-5x.

<i class="tw tw-rocket tw-lg" aria-hidden="true"></i> tw-lg
<i class="tw tw-rocket tw-2x" aria-hidden="true"></i> tw-2x
<i class="tw tw-rocket tw-3x" aria-hidden="true"></i> tw-3x
<i class="tw tw-rocket tw-4x" aria-hidden="true"></i> tw-4x
<i class="tw tw-rocket tw-5x" aria-hidden="true"></i> tw-5x

Bordered & Pulled Icons

... I told myself: Let everyone else call your idea crazy . . . just keep going. Don’t stop. Don’t even think about stopping until you get there, and don’t give much thought to where “there” is. Whatever comes, just don’t stop.

Use tw-border-light or tw-border-dark to add a border around the icon. And use tw-pull-left or tw-pull-right to float the icon to the left or right of text and other elements.

<i class=tw tw-tw-fonts tw-border-dark tw-pull-left tw-3x" aria-hidden="true"></i>... I told myself: Let everyone else call your idea crazy . . . just keep going. Don’t stop. Don’t even think about stopping until you get there, and don’t give much thought to where “there” is. Whatever comes, just don’t stop.

Rotated and Flipped

normal

tw-rotate-90

tw-rotate-180

tw-rotate-270

tw-flip-horizontal

tw-flip-vertical

Use the tw-rotate- and tw-flip- classes to rotate and flip an icon.

<i class="tw tw-pencil" aria-hidden="true"></i> normal
<i class="tw tw-pencil tw-rotate-90" aria-hidden="true"></i> tw-rotate-90
<i class="tw tw-pencil tw-rotate-180" aria-hidden="true"></i> tw-rotate-180
<i class="tw tw-pencil tw-rotate-270" aria-hidden="true"></i> tw-rotate-270
<i class="tw tw-pencil tw-flip-horizontal" aria-hidden="true"></i> tw-flip-horizontal
<i class="tw tw-pencil tw-flip-vertical" aria-hidden="true"></i> tw-flip-vertical

Font Weight

tw-light

tw-heavy

Use the tw-heavy and tw-light classes to change the font weight.

<i class="tw tw-chat-message tw-light tw-4x" aria-hidden="true"></i> tw-light
<i class="tw tw-chat-message tw-heavy tw-4x" aria-hidden="true"></i> tw-heavy

Custom CSS

Anything that you can do with text, you can do with TW-Fonts.

  • All official and brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by TW-Fonts, nor vice versa.
  • Official and brand icons should only be used to represent the company/organization to which they refer.
  • Please do not use official or brand logos for any purpose except to represent that particular brand or service.

Follow Tyler on Facebook

Other projects