How to Type White and Black Smiling Face Emoticons?

Smiling face is one of the most used emoticon referred by many people simply as smiley. This is a text emoticon called white smiling face and also part of the Unicode emoji symbols with the name as smiling face. You can type the white smiling face using text shortcode. In addition, you can also use alt code shortcuts to type white smiling face emoji in Windows and Mac computers.

First let us explain how to type while smiling face emoticon and then the black smiling face emoticon.

White Smiling Face Emoji Shortcuts

Symbol NameWhite Smiling Face
Shortcode: – )
: )
: ]
Alt Code Windows ShortcutAlt + 9786
Alt + 0001
Alt X Word Shortcut263A + Alt + X
Alt Code Mac ShortcutOption + 263A
HTML Entity Decimal☺
HTML Entity Hexadecimal☺
CSS Value\263A;
JavaScript Escape String\u263A;
Decimal9786
Hexadecimal263A
Unicode PointU+263A

Type White Smiling Face Emoticon

Using Shortcode

The most easy way to type white smiling face emoji is to use shortcode. As it is an emoticon, the shortcode will work on most of the popular applications like Facebook and Skype in addition to Windows and Mac documents.

There are multiple shortcodes to the smiling face or smiley. Most popular and working options are to use colon + hyphen + right parenthesis like : – ). Other options are to use : ) in Skype and : ] in Facebook. Remember to use these shorcodes without spaces between.

On Microsoft documents, the AutoCorrect option is set by default to type the smiling face emoticon with the shortcut : ).

Typing White Smiling Face in Windows

  • Hold alt key and press 9786 keys using number pad to type .
  • If you don’t have separate number pad on your keyboard, first enable number lock. Hold function and alt keys and then type 9786 using the numeric keys inside the keyboard layout (not the top number keys).
  • Press 236A and then alt and x keys together on Microsoft Word documents.
  • The most easy way is to press Window logo and colon keys together to open emoji keyboard. Type smiling to filter the emoji to find and insert smiling face emoji.
Smiling Face Emoji in Windows
Smiling Face Emoji in Windows
  • Search for Character Map app using Windows Search box and open the app. Change the font to Wingdings and find the smiling face symbol.
  • You can also use the Symbol utility by going to “Insert > Symbols” menu in Microsoft Word, Excel, PowerPoint and Outlook to insert white smiling face.
Smiling Face Emoji in Word Symbol Utility
Smiling Face Emoji in Word Symbol Utility

Typing White Smiling Face in Mac

  • On Mac, first you need to change the keyboard input method to Unicode Hex Input. Then, type option + 263A to make ☺.
  • Press “Command + Control + Space” to open Character Map app. Type smiling in the search box to filter the smiling face emojis. Double click on the emoji to insert on the cursor position on documents or chat conversation.
Smiling Face Emoji in Mac
Smiling Face Emoji in Mac

Typing White Smiling Face in HTML and CSS

You can use the decimal or hexadecimal code points of the emoticon to insert on HTML documents. Similarly, use the hexadecimal code with any CSS selector as given below:

li:before {
	content:\263B;
	font-family:Bell MT;
}

Smiling Face Emoticon Display

Here is default browser display, it will look like a outlined text emoticon symbol with blue color in Windows and Mac.


The emoji display will change on different platforms as below.

Smiling Face Emoticon AppleApple
Smiling Face Emoticon GoogleGoogle
Smiling Face Emoticon FacebookFacebook
Smiling Face Emoticon WindowsMicrosoft
Smiling Face Emoticon TwitterTwitter

As smiling face is also an emoticon, you can apply all text and typography effects. Below are some of the examples with different styles.

Styling White Smiling Face Emoji
Styling White Smiling Face Emoji

Black Smiling Face Emoticon

We all use white smiling face emoticon. However, most us don’t even know there is a black smiling face emotion you can type with keyboard. Here is an alt code keyboard shortcuts for black smiling face emoticon to insert ☻ in Windows, Mac and web documents.

Symbol NameBlack Smiling Face
Alt Code Windows ShortcutAlt + 9787
Alt + 0002
Alt X Word Shortcut263B + Alt + X
Alt Code Mac ShortcutOption + 263B
HTML Entity Decimal☻
HTML Entity Hexadecimal☻
CSS Value\263B;
JavaScript Escape String\u263B;
Decimal9787
Hexadecimal263B
Unicode PointU+263B

Typing Black Smiling Face in Windows

  • On most of the Windows PC and laptops, you can use alt + 0002 to make ☻. You can use the standard keyboard without additional number pad for this.
  • If you have a keyboard with separate number pad, hold one of alt keys and type 9787 keys to make ☻.
  • Only on Microsoft Windows documents, you can press 236B and then press alt and x keys together to produce the emoticon.

Typing Black Smiling Face in Mac

  • You can type black smiling face emoticon with the use of alt code shortcuts in Mac. Press one of the options key and then type 263B keys to make ☻.
  • Alternatively, use the Character Viewer to insert the emoji. Press “Command + Control + Space” keys to open the Character Viewer. Search for the black smiling face emoji to insert on your documents.
Black Smiling Face in Mac
Black Smiling Face in Mac

Typing Black Smiling Face in HTML and CSS

You can insert this emoticon in HTML using decimal or hexadecimal in the format given in the above table. Use the below example in CSS to insert the emoticon as a list:

li:before {
	content:\263B;
	font-family:Calibri;
}

Symbol Display

Black smiling face emoticon will look like below on the browser.


Text and Font Variations

Unlike colorful emojis, you can customize the font and size of the black smiling face emoticon. Below are some of the examples of text effect styles with reflection, glow, shadow and outline.

Styling Black Smiling Face Emoticon
Styling Black Smiling Face Emoticon

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

Leave a Comment