PubWriter Safe Icons (Bootstrap 5)

As of 2022, I'm currently favoring the BS5 Icon Set.

All you need to do is link to the CDN for the stylesheet:

<link rel="stylesheet" href="">

There are several key advantages to using icons over images:

1. You change the size and color on the fly, like this:

cloud favorite attachment computer

You can specify the color using span class (noted via on page style or an external stylesheet):

<span class="blood"><i class="material-icons">favorite</i> </span>

2. The icons will match the Font color of your site. This becomes especially valuable when you want to add a dark mode switch to your site.

3. Icons are TINY files which allow your website to load much faster.

Pubwriter supports most major icon toolsets including:

  1. Fontawesome
  2. Open Iconic
  3. Devicons
  4. Material Design Icons
  5. Forkawesome
  6. Iconify - 50,000 icons!

Font Awesome Cheatsheets (cut & paste html snippets)

Note: Fontawesome requires <link rel="stylesheet" href=""> in your CSS.






SVGs (to help you find the icon you want)

SVGs also offer the flexibility of changing size and color and with SVGs, you aren't limited to the icons in the toolset above. A tutorial is forthcoming.


More (offsite) Resources

Prefer Emojis?

Open Iconic

Open Iconic Icons

Font Awesome 5 Icons


Font Awesome Icons

Google Material Icons

computer Google Material Icons

mood terrain school send stars star style iso android check time toys work

Icon Animation

With all FontAwesome Icons, we can increase the size of the icons and/or spin 'em!

Or a ball bounce

Or make a heartbeat...

Or heart burst...

Call attention to something important...

Or ask for a review...

Scroll Up

More Animation Options

Explore Further