Designer? Developer?
Love Open Source?
Everyone Can Participate!

Help Design New Emoji

The next set of emojis are due to be released this year, we need your help to make them!

Emoji 13.0

Improve Quality of Emojis

Design is subjective but we want our emoji to follow our style guide and look good.

Comparison polar bear emoji before and after redesign

Improve Consistency with Other Platforms

To be useful for communication, emoji need to convey the same idea.

Example of how other emoji libraries influence the OpenMojis

Styleguide

Grid

The Grid serves as orientation for the size of the emojis. If possible your emojis should stay inside the Grid, but for edge cases use 4px of padding.

Basic Forms

The four basic forms define the possible extents, aiming to visually balance every icon. They don’t always have to be fully filled.

The full grid

Special cases are the “Emoji Faces”. They are placed inside a smaller circle to leave space for additions, such as tears or hands.

The full grid with the center circle highlighted

Examples

3 examples of emoji placed within the grid

Basic Circles

Basic circles should give a consistent look to the entire set. Parts of the circles can also be used for rounded corners or wavy forms.

Circles in various sizes from 46px to 4px

Examples

Three emoji showing the various circle sizes in use

Contour

The stroke settings are: 2px weight, round corners and ends. Two overlapping contours should have a minimum gap of 2px.

The different types of contours and cornes: Round caps, round edges and centered contour

Open Contour

The open contours result in a nice dynamic look and should be used for overlapping lines or perspective.

Two examples showing the open contour

Contour and Fill

The fill should continue as if the contour was still there

Two examples the expected fill style

Perspective

All objects should be displayed 2-dimensionally from the front. In exceptional cases use an isometric projection for better distinction.

Example for dos and don'ts regarding perspective

Color

Please aim to mainly use the primary colors. Use the lighter colours as default colours and reserve the darker colors for shadowing. The four secondary colors should only be used in special cases.

OpenMoji Color Palette (.svg)
Inkscape Palette (.gpl)
Illustrator Palette (.ase)

Primary Colors

The primary colors: Two shades of blue, red, green and yellow and a range from white to black with 3 grays in between

Secondary Colors

The secondary colors: Two shades of rose, lavender, orange and brown

Shadow

The lighter color should be used for the fill, the darker color for the shading.

Two examples showing the shading

Typography

We provide a custom font for emojis which have to contain typographic elements. Please use it for all text.

A sample of the custom openmoji font

Topics

People

Multiple examples of people-emojis

Full Body

People are pictured without clothing. Narrow their legs at the bottom. Arms are drawn as a single line. Static people are portrayed from the front, moving people from the side. Complex objects with a lot of overlapping forms should be simplified.

Examples of full body emojis

Bust

The face is elliptical. There is no neck, but there is a gap between head and shoulders. The eyes are in the middle of the head. For a neutral look, the mouth should align to the center point of the eyes.

Examples of emoji where only the bust is visible

Hands

The thumb converges slightly at the end. The lower side of the hand is rounded. Fingers have a width of 7px.

Examples of hand-emojis

Arrows

The arrow head is made out of one basic form.

Examples of arrow-emojis

Arrows use double lines for every emoji. For special cases (e.g. icons for user interfaces), a single line is possible as well.

Example of how to translate from a double line emoji to a single line emoji

Buildings

Buildings are shown from the front with an entrance door. Details should be reduced strongly.

Examples of buildings

Animals and Plants

Plants are illustrated organically. Stems should always be a single line. Animals with a big body are illustrated from the side. The body shape should be organic, but not simplified too much.

Examples of animal-emojis and plant-emojis

Vehicles

Vehicles should be deduced from the shapes of real world models to avoid a toyish look. Vehicles are illustrated from the side. Tires are placed on the bottom line of the vehicle.

Examples of vehicle-emojis

Submission

SVG File Specification

File Name: Unicode.svg

Example: 1F469-200D-1F680.svg

Mandatory layers:
  • line
  • hair
  • skin-shadow
  • color
  • grid

Screenshot of Adobe Illustrator with the correct layers

Special Layers

You might run into situations where you need special layers such as color-foreground or line-supplement. Both are optional and should only be used if really necessary.

color-foreground

The red frame of the bike has to be in the foreground. Therefore, add a “color-foreground” layer and put it before “line” layer.

Explanation on how to structure the file

line-supplement

The black line of the exploding head has to be underneath the “color” layer. Therefore, add a “line-supplement” layer and put it behind the “color” layer.

Explanation on how to structure the file

Export

Adobe Illustrator
  1. Click File > Export > Export for Screens
  2. Click “gear” icon
  3. Set “Format Settings” for SVG

Screenshot from Adobe Illustrator with the correct export settings

Inkscape
  1. Click File > Save As
  2. Click Save as type: > Optimised SVG > Save
  3. Set “Optimised SVG Output” Settings

Screenshots from Inkscape with the correct export settings

Figma
  1. Select frame
  2. In the export pane select SVG and set .figma as suffix
  3. Make sure Contents Only and Include “id” Attribute is checked
  4. Run node helpers/prettyfy-figma-svg.js

Screenshot from Figma with the correct export settings

Templates

openmoji-template.ai
openmoji-template.svg