14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

Skins and Icon Packs: a closer look at your options

August 27th, 2019

2 min read

TinyMCE

Written by

Fredrik Danielsson

Category

World of WYSIWYG

Now you can quickly give TinyMCE 5 a new look and feel with our premium Skins and Icon Packs. We made skins for popular design systems such as Bootstrap, Microsoft Fabric and Google’s Material Design, as well as a couple of alternate TinyMCE skins: a small skin to create an editor that is smaller overall, and a borderless skin, which is useful if you want to use TinyMCE in full screen or wrap the editor with your own borders.

We also made different icon packs: one with the Material icons, one with smaller versions of our default icons, and one with fun and small icons from the Jam icon library.

Here’s a closer look at each of the new skins and icon packs.

Material

We have two Material skins, one with the classic Material look, and one with the newer Outline design.

Material Classic skin for TinyMCE 5
Material Outline skin for TinyMCE 5

Bootstrap

If you are using Bootstrap, then we have a Bootstrap skin for you that closely follows the default Bootstrap design, especially the dialogs and buttons.

Bootstrap skin for TinyMCE 5

Fabric

If you want to get that Microsoft Word look and feel, then Fabric is the skin for you.

Fabric skin for TinyMCE 5

Jam

Jam is an open source icon library from which we created our Jam icon pack. And we created a fun and compact skin to go with it.

Jam Icons skin for TinyMCE 5

Other Skins

We have a small skin icon pack if you want a slightly smaller editor, which is useful when horizontal space is scarce.

The “Small” skin for a lightweight TinyMCE 5

Borderless is a skin that removes the outer border from the default editor, allowing you to wrap TinyMCE in your own borders. It’s also perfect for fullscreen use.

Borderless skin TinyMCE 5

You can also mix-and-match the skins and icon packs, and we’ve put together a compatibility matrix to help guide your decision making.

We plan to release new skins and icon packs on an ongoing basis. These skins are built using our Style API that we introduced with TinyMCE 5. The Style API allows for advanced skinning without any change to the CSS or HTML.

If there are any skins or icon packs you would like us to consider for future releases, please drop us a line at team [at] tiny [dot] cloud and let us know.

And to be kept up to date on future updates to our Skins and Icon Packs feature, and all important Tiny announcements, please follow us on Twitter and Github, and you can sign up for our newsletter below.

Skins and Icons
byFredrik Danielsson

Fredrik is Principal Designer at Tiny, responsible for choosing the exact right shade of gray for borders and icons.

Related Articles

  • World of WYSIWYGNov 29th, 2023

    Best WYSIWYG editor image upload solutions compared: under pressure

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.