Skip to content

Add white outline to black emojis #258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pelya wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add white outline to black emojis #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7538cf
Support for dark theme in emoji preview table
pelya Aug 14, 2026
770043f
Generate images with white outline for black emojis
pelya Aug 14, 2026
09e2b5d
Generated new images and updated sprite sheets
pelya Aug 20, 2026
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
3 changes: 3 additions & 0 deletions build/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ You can rebuild by following these steps:
./download_spec_files.sh
php build_map.php

# Generate versions of images with white outline (requires ImageMagick)
php build_outline.php

# From the final mapping, build a preview table
php build_table.php > ../table.htm

Expand Down
4 changes: 4 additions & 0 deletions build/build_map.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -872,6 +872,10 @@ function simple_row($img_key, $shorts, $props){
}
}

if (in_array(strtolower($props['name']), $GLOBALS['outline_symbols'])){
$ret['image'] = $img_key.'-outline.png';
}

return $ret;
}

Expand Down
53 changes: 53 additions & 0 deletions build/build_outline.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<?php
error_reporting((E_ALL | E_STRICT) ^ E_NOTICE);

$dir = dirname(__FILE__);

include('common.php');
include('sets.php');

$in = file_get_contents(__DIR__.'/../emoji.json');
$catalog = json_decode($in, true);

foreach ($catalog as $row){
if (!in_array(strtolower($row['name']), $outline_symbols)) {
continue;
};

echo "Generating {$row['image']} for {$row['name']}\n";
$src_img = str_replace('-outline.png', '.png', $row['image']);
foreach ($image_sets as $set){
foreach (array(160, 136, 96, 72, 64) as $sz){
$src_path = "{$dir}/../img-{$set}-{$sz}/{$src_img}";
$dst_path = "{$dir}/../img-{$set}-{$sz}/{$row['image']}";
if (file_exists($src_path)){
#echo "{$src_path} => {$dst_path}\n";
generate_outline($src_path, $dst_path, $sz);
}
}
}
}


function generate_outline($src_path, $dst_path, $size){

$thickness = $size >= 96 ? 4 : 3;
# Color of Signal emoji picker dialog background
$color = '#f5f5f5';

$cmd = "magick {$src_path} ".
"'(' +clone -alpha extract -morphology dilate disk:{$thickness} -background '{$color}' -alpha shape ')' ".
"-gravity center -compose dst-over -composite -strip -alpha background -quality 95 {$dst_path}";
$fd_spec = array();
$pipes = array();
$cwd = __DIR__.'/..'; # chdir into parent directory first

$res = proc_open($cmd, $fd_spec, $pipes, $cwd);

$code = proc_close($res);

if ($code > 0) {
echo "Something went wrong\n\n";
exit;
}
}
3 changes: 2 additions & 1 deletion build/build_table.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ function emoji_utf8_bytes($cp){
<html>
<head>
<meta charset="UTF-8" />
<meta name="color-scheme" content="light dark" />
<title>Emoji Catalog</title>
<link rel="stylesheet" type="text/css" media="all" href="emoji.css" />
<style type="text/css">
Expand Down Expand Up @@ -84,7 +85,7 @@ function emoji_utf8_bytes($cp){
}

table tbody tr:nth-child(even) {
background: #dedede;
background: light-dark(#dedede, #303030);
}

table tbody td {
Expand Down
49 changes: 49 additions & 0 deletions build/common.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,54 @@
<?php

$outline_symbols = array (
'copyright sign',
'registered sign',
'new moon symbol',
'movie camera',
'headphone',
'top hat',
'musical note',
'multiple musical notes',
'musical score',
'waving black flag',
'black cat',
'black bird',
'paw prints',
'footprints',
'bomb',
'currency exchange',
'heavy dollar sign',
'telephone receiver',
'electric plug',
'back with leftwards arrow above',
'end with leftwards arrow above',
'on with exclamation mark with left right arrow above',
'soon with rightwards arrow above',
'top with upwards arrow above',
'sunglasses',
'spider',
'spider web',
'black heart',
'heavy equals sign',
'motorized wheelchair',
'manual wheelchair',
'stethoscope',
'hair pick',
'trade mark sign',
'chess pawn',
'black spade suit',
'black club suit',
'infinity',
'heavy check mark',
'heavy multiplication x',
'heavy plus sign',
'heavy minus sign',
'heavy division sign',
'curly loop',
'double curly loop',
'wavy dash',
);

function encode_points($points){
$bits = array();
if (is_array($points)){
Expand Down
2 changes: 1 addition & 1 deletion emoji.json
View file
Open in desktop

Large diffs are not rendered by default.

Loading