ICONYZ
English

Noto Emoji (v1) icons

noto-v1 · 2,162 icons · by Google Inc · Apache-2.0 · multicolor · 16px grid · Updated

Noto Emoji (v1) icons is a free, open source icon set with 2,162 SVG icons by Google Inc, released under the Apache 2.0 license. The icons are multicolor, so they keep their own colors at any size. They are designed on a 16px grid and scale cleanly as SVG.

Noto Emoji (v1) icons design specs

  • filled
  • multicolor

The drawing rules of this set, measured from its SVG files. Use them to design new icons that match it.

Canvas128 × 128
viewBox0 0 128 128
Drawing areaFull canvas, no padding
Drawing styleFilled shapes
Corner radius6
ColorsAbout 4 colors per icon
CoordinatesUp to 3 decimals
Straight lines51% horizontal or vertical, 4% at 45°
Curves83% of drawing commands
Symmetry33% of icons are left-right symmetric
Elements per icon8.3
Drawing commands per icon111

Measured from 64 icons of this set.

AI icon generation

The license allows new icons derived from this set.

  • Credit the original authors.

Credit line: Based on Noto Emoji (v1) by Google Inc, licensed under Apache 2.0. https://github.com/googlefonts/noto-emoji/blob/main/svg/LICENSE

Style guide for an LLM prompt (English)

Paste it into a prompt with a few icons from this set, then name the icon you want.

You draw new icons for the "Noto Emoji (v1)" icon set (Iconify prefix "noto-v1") by Google Inc.
Style: filled, solid, multicolor.
Iconify describes the set as: Precise Shapes, Has Padding.

Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">.
- Draw edge to edge: icons use the full canvas with no padding.
- A typical icon's bounding box covers 86% of the canvas.

Drawing
- Filled icons: draw closed filled shapes; don't use strokes.
- Round corners with a radius of about 6.

Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 51% horizontal or vertical, 4% at 45 degrees.
- About 83% of drawing commands are curves or arcs.
- Keep it simple: about 8 elements and 111 drawing commands per icon.
- Elements used by the set: path, g, defs, use, clippath, circle, ellipse.
- 25% of icons cut or clip shapes with <mask> or <clipPath>.

Color
- Multicolor, about 4 colors per icon. Use this palette: #ffffff, #2f2f2f, #fcc21b, #ed6c30, #f79329, #78a3ad, #40c0e7, #855c52, #444444, #6d4c41, #000000, #006ca2.

Output
- Reply with one complete <svg> element and nothing else: no comments, <title>, ids or scripts.
- Match the examples: reuse their shapes for shared parts (arrow heads, people, documents, badges).
Page 1 of 23
1st-place-medal icon
1st-place-medal
2nd-place-medal icon
2nd-place-medal
3rd-place-medal icon
3rd-place-medal
a-button-blood-type icon
a-button-blood-type
ab-button-blood-type icon
ab-button-blood-type
admission-tickets icon
admission-tickets
aerial-tramway icon
aerial-tramway
airplane icon
airplane
airplane-arrival icon
airplane-arrival
airplane-departure icon
airplane-departure
alarm-clock icon
alarm-clock
alembic icon
alembic
alien icon
alien
alien-monster icon
alien-monster
ambulance icon
ambulance
american-football icon
american-football
amphora icon
amphora
anchor icon
anchor
anger-symbol icon
anger-symbol
angry-face icon
angry-face
angry-face-with-horns icon
angry-face-with-horns
anguished-face icon
anguished-face
ant icon
ant
antenna-bars icon
antenna-bars
anxious-face-with-sweat icon
anxious-face-with-sweat
aquarius icon
aquarius
aries icon
aries
articulated-lorry icon
articulated-lorry
artist-palette icon
artist-palette
asterisk icon
asterisk
astonished-face icon
astonished-face
atm-sign icon
atm-sign
atom-symbol icon
atom-symbol
automobile icon
automobile
avocado icon
avocado
b-button-blood-type icon
b-button-blood-type
baby icon
baby
baby-angel icon
baby-angel
baby-angel-dark-skin-tone icon
baby-angel-dark-skin-tone
baby-angel-light-skin-tone icon
baby-angel-light-skin-tone
baby-angel-medium-dark-skin-tone icon
baby-angel-medium-dark-skin-tone
baby-angel-medium-light-skin-tone icon
baby-angel-medium-light-skin-tone
baby-angel-medium-skin-tone icon
baby-angel-medium-skin-tone
baby-bottle icon
baby-bottle
baby-chick icon
baby-chick
baby-dark-skin-tone icon
baby-dark-skin-tone
baby-light-skin-tone icon
baby-light-skin-tone
baby-medium-dark-skin-tone icon
baby-medium-dark-skin-tone
baby-medium-light-skin-tone icon
baby-medium-light-skin-tone
baby-medium-skin-tone icon
baby-medium-skin-tone
baby-symbol icon
baby-symbol
back-arrow icon
back-arrow
backhand-index-pointing-down icon
backhand-index-pointing-down
backhand-index-pointing-down-dark-skin-tone icon
backhand-index-pointing-down-dark-skin-tone
backhand-index-pointing-down-light-skin-tone icon
backhand-index-pointing-down-light-skin-tone
backhand-index-pointing-down-medium-dark-skin-tone icon
backhand-index-pointing-down-medium-dark-skin-tone
backhand-index-pointing-down-medium-light-skin-tone icon
backhand-index-pointing-down-medium-light-skin-tone
backhand-index-pointing-down-medium-skin-tone icon
backhand-index-pointing-down-medium-skin-tone
backhand-index-pointing-left icon
backhand-index-pointing-left
backhand-index-pointing-left-dark-skin-tone icon
backhand-index-pointing-left-dark-skin-tone
backhand-index-pointing-left-light-skin-tone icon
backhand-index-pointing-left-light-skin-tone
backhand-index-pointing-left-medium-dark-skin-tone icon
backhand-index-pointing-left-medium-dark-skin-tone
backhand-index-pointing-left-medium-light-skin-tone icon
backhand-index-pointing-left-medium-light-skin-tone
backhand-index-pointing-left-medium-skin-tone icon
backhand-index-pointing-left-medium-skin-tone
backhand-index-pointing-right icon
backhand-index-pointing-right
backhand-index-pointing-right-dark-skin-tone icon
backhand-index-pointing-right-dark-skin-tone
backhand-index-pointing-right-light-skin-tone icon
backhand-index-pointing-right-light-skin-tone
backhand-index-pointing-right-medium-dark-skin-tone icon
backhand-index-pointing-right-medium-dark-skin-tone
backhand-index-pointing-right-medium-light-skin-tone icon
backhand-index-pointing-right-medium-light-skin-tone
backhand-index-pointing-right-medium-skin-tone icon
backhand-index-pointing-right-medium-skin-tone
backhand-index-pointing-up icon
backhand-index-pointing-up
backhand-index-pointing-up-dark-skin-tone icon
backhand-index-pointing-up-dark-skin-tone
backhand-index-pointing-up-light-skin-tone icon
backhand-index-pointing-up-light-skin-tone
backhand-index-pointing-up-medium-dark-skin-tone icon
backhand-index-pointing-up-medium-dark-skin-tone
backhand-index-pointing-up-medium-light-skin-tone icon
backhand-index-pointing-up-medium-light-skin-tone
backhand-index-pointing-up-medium-skin-tone icon
backhand-index-pointing-up-medium-skin-tone
backpack icon
backpack
bacon icon
bacon
badminton icon
badminton
baggage-claim icon
baggage-claim
baguette-bread icon
baguette-bread
balance-scale icon
balance-scale
balloon icon
balloon
ballot-box-with-ballot icon
ballot-box-with-ballot
banana icon
banana
bank icon
bank
bar-chart icon
bar-chart
barber-pole icon
barber-pole
baseball icon
baseball
basketball icon
basketball
bat icon
bat
bathtub icon
bathtub
battery icon
battery
beach-with-umbrella icon
beach-with-umbrella
beaming-face-with-smiling-eyes icon
beaming-face-with-smiling-eyes
bear icon
bear

About Noto Emoji (v1) icons

The set is organised into 9 categories, including people & body (1117), symbols (245), travel & places (199) and objects (191).

Popular Noto Emoji (v1) icons include face with open mouth, no entry, scissors, card index dividers, key and magnifying glass tilted left.

Open any icon to copy it as SVG, JSX, Vue, Svelte, Solid, Astro or CSS, or download it as SVG or PNG. Noto Emoji (v1) icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.

Noto Emoji (v1) icons by category

How to use Noto Emoji (v1) icons

Every icon on this page works in any framework. Examples use noto-v1:face-with-open-mouth; open an icon to copy its exact SVG, JSX, Vue, Svelte, Solid, Astro or CSS code. For sizing, color and accessibility tips, read how to use SVG icons.

React

import { Icon } from "@iconify/react";

<Icon icon="noto-v1:face-with-open-mouth" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="noto-v1:face-with-open-mouth" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="noto-v1:face-with-open-mouth" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[noto-v1--face-with-open-mouth]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/noto-v1 -->
<div class="i-noto-v1:face-with-open-mouth"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="noto-v1:face-with-open-mouth"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/noto-v1/face-with-open-mouth.svg" alt="Face With Open Mouth icon" width="24" height="24">

Noto Emoji (v1) icons FAQ

Are Noto Emoji (v1) icons free for commercial use?

Yes. Noto Emoji (v1) icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.

How many icons are in Noto Emoji (v1) icons?

Noto Emoji (v1) icons contains 2,162 icons across 9 categories.

What license do Noto Emoji (v1) icons use?

Noto Emoji (v1) icons are licensed under Apache 2.0. The full license text is available at https://github.com/googlefonts/noto-emoji/blob/main/svg/LICENSE.

Who made Noto Emoji (v1) icons?

Noto Emoji (v1) icons are created by Google Inc.

How do I use Noto Emoji (v1) icons in React?

Install @iconify/react and render <Icon icon="noto-v1:face-with-open-mouth" />, or open any icon on this page and copy it as a standalone React component.

What size are Noto Emoji (v1) icons?

Noto Emoji (v1) icons are designed on a 16px grid. As SVGs they scale to any size without losing quality.

Similar icon sets