Menu
Emoji
UI Docs
Getting Started New in 2.9
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Emoji Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Text
Collections
Breadcrumb Form Grid Menu Message Table
Views
Ad Card Comment Feed Item Statistic
Modules
Accordion Calendar Checkbox Dimmer Dropdown Embed Flyout Modal Nag Popup Progress Rating Search Shape Sidebar Slider Sticky Tab Toast Transition
Behaviors
API Form Validation State Visibility

Emoji
An emoji is a glyph used to represent an emotional state

Emojis Definition

Emoji

Emojis

Emoji Set
PeopleNatureFoodActivityTravelObjectsSymbolsFlagsRegionalModifier

Emoji Set

An emoji set contains all Unicode 15.1 Emoji Characters

Emojis serve a very similar function to text in a page. In Fomantic emojis receive a special tag <em> which allow for an abbreviated markup when sitting along-side text.
Because of the complexity and possible interference with existing fomantic classnames, emoji names have to be provided via the data-emoji attribute instead of usual classnaming.
By default all emoji images are linked to a CDN and are not part of Fomantic itself. If needed, you might download your personal icon set from the respective websites respecting their individual licenses, host it locally and change the @emojiPath in emoji.variables of the theme you are using.
If you use Fomantic in a commercial or business project or want to host the emoji assets locally and also want to use the alternative joypixels set, you may require an additional license for your project depending of the usage.
You will find joypixels licenses at https://www.joypixels.com/licenses
You can reduce your custom generated CSS by adjusting the @emoji-map variable in your themes emoji.variables file to only the emojis you need.

People


adult

adult_tone1

adult_tone2

adult_tone3

adult_tone4

adult_tone5

alien

anatomical_heart

angel

angel_tone1

angel_tone2

angel_tone3

angel_tone4

angel_tone5

angry

anguished

artist

artist_tone1

artist_tone2

artist_tone3

artist_tone4

artist_tone5

astonished

astronaut

astronaut_tone1
Show more people emojis

Nature


ant

baby_chick

badger

bamboo

bat

bear

beaver

bee

beetle

bird

bison

black_bird

black_cat

blossom

blowfish

boar

boom

bouquet

brown_mushroom

bubbles

bug

butterfly

cactus

camel

cat2
Show more nature emojis

Food


apple

avocado

baby_bottle

bacon

bagel

banana

beans

beer

beers

bell_pepper

bento

beverage_box

birthday

blueberries

bone

bowl_with_spoon

bread

broccoli

bubble_tea

burrito

butter

cake

candy

canned_food

carrot
Show more food emojis

Activity


8ball

accordion

art

badminton

ballet_shoes

banjo

baseball

basketball

boomerang

bow_and_arrow

bowling

boxing_glove

chess_pawn

circus_tent

clapper

cricket_game

curling_stone

dart

diving_mask

drum

field_hockey

first_place

fishing_pole_and_fish

flute

flying_disc
Show more activity emojis

Travel


aerial_tramway

airplane

airplane_arriving

airplane_departure

airplane_small

ambulance

anchor

articulated_lorry

auto_rickshaw

bank

beach

beach_umbrella

bike

blue_car

bridge_at_night

bullettrain_front

bullettrain_side

bus

busstop

camping

canoe

carousel_horse

church

city_dusk

city_sunset
Show more travel emojis

Objects


abacus

adhesive_bandage

alarm_clock

alembic

amphora

axe

balloon

ballot_box

bar_chart

barber

basket

bath

bath_tone1

bath_tone2

bath_tone3

bath_tone4

bath_tone5

bathtub

battery

bed

bellhop

black_nib

blue_book

bomb

book
Show more objects emojis

Symbols


100

1234

a

ab

abc

abcd

accept

anger

anger_right

aquarius

aries

arrow_backward

arrow_double_down

arrow_double_up

arrow_down

arrow_down_small

arrow_forward

arrow_heading_down

arrow_heading_up

arrow_left

arrow_lower_left

arrow_lower_right

arrow_right

arrow_right_hook

arrow_up
Show more symbols emojis

Flags


checkered_flag

crossed_flags

england

flag_ac

flag_ad

flag_ae

flag_af

flag_ag

flag_ai

flag_al

flag_am

flag_ao

flag_aq

flag_ar

flag_as

flag_at

flag_au

flag_aw

flag_ax

flag_az

flag_ba

flag_bb

flag_bd

flag_be

flag_bf
Show more flags emojis

Regional


regional_indicator_a

regional_indicator_b

regional_indicator_c

regional_indicator_d

regional_indicator_e

regional_indicator_f

regional_indicator_g

regional_indicator_h

regional_indicator_i

regional_indicator_j

regional_indicator_k

regional_indicator_l

regional_indicator_m

regional_indicator_n

regional_indicator_o

regional_indicator_p

regional_indicator_q

regional_indicator_r

regional_indicator_s

regional_indicator_t

regional_indicator_u

regional_indicator_v

regional_indicator_w

regional_indicator_x

regional_indicator_y

Modifier


tone1

tone2

tone3

tone4

General

You can provide the emoji shortname with or without colons

I <em data-emoji=":cupid:"></em> Fomantic-UI
I <em data-emoji="cupid"></em> Fomantic-UI

States

Disabled

An emoji can show that it is disabled

Loading

An emoji can be used as a simple loader

Variations

Size

An emoji can vary in size

Small
Medium
Large
Big

Autosizing

If no specific size class is given, all emojis are automatically sized according to the current element font-size

Within a header
Within a button


Within a label


Within a text

An emoji can be formatted as a link

Dimmer Message
Dimmer sub-header