Make it classy with emoji, icons and more

Emoji and Icons

Make your docs look classy and fun to read by using beautiful icons and emoji. There are thousands of them, and you will always find what you need.

Yo can include emoji in your markdown text using special words. For example, simply adding :smile: right to the markdown text, will make this smily face show up

There are lots of emoji (thousand) available out of the box

Examples of Emoji

Output

The full list of short emoji names

Markdown

:smile: :heart: :thumbsup: :100: :muscle: :accept: :point_up: :airplane: :champagne: :raised_hands: :boom: :laughing: :metal: :handshake: :older_man: :sheep: :no_entry: :mouse: :relieved: :question: :wink: :wave: :rainbow: :sleeping:  

:point_right: [The full list of short emoji names](https://github.com/facelessuser/pymdown-extensions/blob/main/pymdownx/emoji1_db.py)

Same as with emoji, you can include fancy icons in your markdown documents. You can use icons from the following icon sets:

- Font Awesome
- Material Design Icons
- Octicons

Getting icon from Font Awesome

Open Font Awesome icon explorer web page

Chose only free icons to show, select one of the categories: regular, solid, light, thin, brands

Placeholder

Pick up any icon from the selected category - each of them has name, for example icon video from the category solid

Placeholder

Combine words fontawesome, solid and video to create the short icon name: :fontawesome-solid-video: Add this name to the markdown text, and the icon is showing up

Getting icon from Material Design

Open Material Design Icons explorer

Find an icon, for example chat-alert-outline

Placeholder

Combine words material and chat-alert-outline to create the short icon name: :material-chat-alert-outline: Add this name to the markdown text, and the icon is showing up

Getting icon from Octicons

Open Octicons explorer

Find an icon, for example cpu

Chose the size: 24px or 16px

Placeholder

Combine words octicons, cpu and 24 to create the short icon name: :octicons-cpu-24: Add this name to the markdown text, and the icon is showing up

Examples of icons

Output

Markdown

:fontawesome-brands-medium: :fontawesome-brands-facebook: :fontawesome-solid-book-open: :fontawesome-regular-snowflake: :material-google-maps: :material-guy-fawkes-mask: :fontawesome-brands-youtube-square: :material-check-circle: :material-arrow-right: :fontawesome-solid-user: :fontawesome-solid-paper-plane: :fontawesome-solid-ship:

:fontawesome-brands-firefox:{style="color: orange; font-size: 40px;"}

Smart symbols

There are several symbols that be will automatically beautified without any additional actions

Markdown	Result
`(tm)`	™
`(c)`	©
`(r)`	®
`c/o`	℅
`+/-`	±
`-->`	→
`<--`	←
`<-->`	↔
`=/=`	≠
`1/4, etc.`	¼, etc.
`1st 2nd etc.`	1^st 2^nd etc.

Find any icon or emoji easily!

Abbreviations

FYI abbreviations that are familiar to you might confuse other people. Make it simpler for everyone

Abbreviation

Output

The dumbest message I've ever recieved: "OK IDK FWIW IMHO RTFM ROTFLMAO JK ILY TTFN"

Markdown

The dumbest message I've ever recieved:  "OK IDK FWIW IMHO RTFM ROTFLMAO JK ILY TTFN" 

*[IDK]: I don't know
*[FWIW]: for what it's worth
*[IMHO]: in my humble opinion
*[RTFM]: read the manual
*[ROTFLMAO]: Rolling on the floor laughing
*[JK]: Just kidding
*[ILY]: I love you
*[TTFN]: Ta ta for now

Superscipt & Subscript

Wrap text around both sides with ^ to make it look like a superscript

Superscript

Output

Sin² + Cos² = 1

2^e

^$80

Googol = 10¹⁰⁰

Markdown

Sin^2^ + Cos^2^ = 1  

2^e^

^$^80

Googol = 10^100^

Wrap text around both sides with ~ to make it look like a subscript

Subscript

Output

C_hex = 12_dec = 14_oct

C₂H₅0H

⁶⁷/₆₈

Markdown

C~hex~ = 12~dec~ = 14~oct~ 

C~2~H~5~0H 

^67^/~68~

Critic

to insert text use {++insert text++}
to ~~remove text~~ use {--remove text--}
to ~~substitute this~~with this use {~~substitute this~>with this~~}
to highlight text use {==highlight text==}
to highlight textwith a comment use {==highlight text==}{>>with a comment<<}

Critic

Output

We Uber drivers never know whom we’re going to end up with as a passenger ~~in the same car~~. One day, I was driving over a new bridge, the design of which was very ~~confusing~~ugly. Completely confounded, I mutteredActually I said it out loud, “I’d love to meet the ~~genius~~retard who designed this mess.” With that, my passenger extended his hand in my directionI thought he wanted to choke me and said, “Well, today is your ~~very~~ lucky day. My name is Mike, I work for the county engineer’s office, and I’m the geniusobviously an irony who designed this!”. Surprisingly, he still gave me a tip of 2 dollars.

Markdown

We Uber drivers never know whom we’re going to end up with as a passenger {--in the same car--}. One day, I was driving over a new bridge, the design of which was very {~~confusing~>ugly~~}. Completely confounded, {==I muttered==}{>>Actually I said it out loud<<}, “I’d love to meet the {~~genius~>retard~~} who designed this mess.” With that, my passenger {==extended his hand in my direction==}{>>I thought he wanted to choke me<<} and said, “Well, today is your {--*very*--} lucky day. My name is Mike, I work for the county engineer’s office, and I’m the {==genius==}{>>obviously an irony<<} who designed this!”. Surprisingly, he still gave me a tip {++**of 2 dollars**++}.

Keys

You can create beautiful styles for keyboard keys and key combinations just like this: ++ctrl++ yields Ctrl

Beautiful Keys

Output

Enter Tab Space Up Down Page Up Home Backspace Ins

Alt Right Alt Left Command Right Ctrl Fn Shift Left Shift

| \ | ; ~ _

{ } [ ] " '

! , = < > -

1 F9 Q Num 0 Num 1 Num Lock

Ctrl+Alt+Del

Markdown

++enter++   ++tab++   ++space++   ++arrow-up++  ++arrow-down++   ++page-up++    ++home++    ++backspace++    ++insert++

++alt++     ++right-alt++   ++left-command++    ++right-control++   ++fn++  ++shift++   ++left-shift++

++pipe++   ++backslash++    ++bar++     ++semicolon++   ++tilde++   ++underscore++

++brace-left++      ++brace-right++     ++bracket-left++    ++bracket-right++   ++double-quote++    ++single-quote++ 

++exclam++  ++comma++   ++equal++   ++less++    ++greater++   ++minus++

++1++   ++f9++   ++q++  ++num0++    ++num1++    ++num-lock++

++ctrl+alt+delete++

The complete list of keys