Callout Emojis

Jump to bottom

Eda edited this page Jul 20, 2025 · 3 revisions

Callout Emojis

Use emojis as callout icons, with skin tones!

wave emoji with different skin tones

Note: you can use the Obsidian Style Settings plugin to easily switch between skin tones.

Usage

In Obsidian, callouts can be created by giving a type identifier such as [!info] to the first line of a blockquote such as:

> [!info]
> Here's a callout block.

See more at https://help.obsidian.md/Editing+and+formatting/Callouts.

Emoji names work just like type identifiers, so you can add, for example, [!gift] to display the gift emoji (🎁) as the icon:

gift emoji in callout

List of emojis

Activities

Animals & nature

Food & drink

Objects

Symbols

warning
prohibited
no-entry
peace
infinity
question
exclamation
recycle
check
cross
circle-red
circle-orange
circle-yellow
circle-green
circle-blue
circle-purple
square-red
square-orange
square-yellow
square-green
square-blue
square-purple

Travel & places

People & body

Smileys & emotion

Flags

Clocks

12
12-30
1
1-30
2
2-30
3
3-30
4
4-30
5
5-30
6
6-30
7
7-30
8
8-30
9
9-30
10
10-30
11
11-30

Brands & logos

Miscellaneous

flag
iceberg
first-aid
location
brain
barcode
qr
shuttle
pyramids
interview
filter
trash
comment
red-jar
blue-jar
orange-jar
yellow-jar
green-jar
purple-jar
hacker-cat

Showcase

Extending emojis

You can add more emojis from OpenMoji by downloading the SVG of the emoji you choose. This repository includes a helpers.mjs file to convert it easily to a CSS variable. For example, you can get the CSS variable of your SVG:

console.log(
  makeEmojiCSSVariable(
    'unicorn', makeSVGOneLine('/path/to/unicorn.svg')
  )
);

And add it to :root in callout-emojis.css. Then, inside callout-emojis.css, you can add the new variable to be the callout icon:

.callout[data-callout='unicorn'] {
  --callout-color: <your-prefered-color-rgb>;
  --callout-icon: var(--unicorn);
}

Note that the unicorn emoji is already included as an icon!