SVG Moji

https://github.com/svgmoji/svgmoji
Admin
Consume popular open-source emoji libraries as SVG sprites with optimized file sizes and...
Tokens:9,855
Snippets:152
Trust Score:4.5
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Setup and Install Dependencies

Source: https://github.com/svgmoji/svgmoji/blob/main/docs/contributing.md

Clone the repository, set up the upstream remote, and install project dependencies using pnpm. This includes checking out a new branch for development.

```bash
git clone svgmoji/svgmoji
cd template
git remote add upstream https://github.com/svgmoji/svgmoji
pnpm install

# Checkout a branch and start working on it
git checkout -b BRANCH_NAME
```

--------------------------------

### Install @svgmoji/blob

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__blob/readme.md

Install the package using yarn, pnpm, or npm.

```bash
# yarn
yarn add @svgmoji/blob

# pnpm
pnpm add @svgmoji/blob

# npm
npm install @svgmoji/blob
```

--------------------------------

### Install @svgmoji/twemoji

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__twemoji/readme.md

Install the package using yarn, pnpm, or npm.

```bash
# yarn
yarn add @svgmoji/twemoji

# pnpm
pnpm add @svgmoji/twemoji

# npm
npm install @svgmoji/twemoji
```

--------------------------------

### Install @svgmoji/openmoji

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__openmoji/readme.md

Install the package using yarn, pnpm, or npm.

```bash
yarn add @svgmoji/openmoji
```

```bash
pnpm add @svgmoji/openmoji
```

```bash
npm install @svgmoji/openmoji
```

--------------------------------

### Install @svgmoji/noto

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__noto/readme.md

Install the package using yarn, pnpm, or npm.

```bash
# yarn
yarn add @svgmoji/noto

# pnpm
pnpm add @svgmoji/noto

# npm
npm install @svgmoji/noto
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/svgmoji/svgmoji/blob/main/support/website/readme.md

Install all necessary project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Start Local Development Server

Source: https://github.com/svgmoji/svgmoji/blob/main/support/website/readme.md

Start a local development server for live previewing changes. Changes are reflected live without requiring a server restart.

```bash
pnpm start
```

--------------------------------

### Install @svgmoji/core

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__core/readme.md

Install the @svgmoji/core package using yarn, pnpm, or npm.

```bash
# yarn
yarn add @svgmoji/core

# pnpm
pnpm add @svgmoji/core

# npm
npm install @svgmoji/core
```

--------------------------------

### Install svgmoji with pnpm

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji/readme.md

Install the svgmoji package using the pnpm package manager.

```bash
pnpm add svgmoji
```

--------------------------------

### Install @svgmoji/noto Package

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Installs the Noto emoji library using pnpm. This is a prerequisite for using Notomoji.

```bash
pnpm add @svgmoji/noto
```

--------------------------------

### Install svgmoji with npm

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji/readme.md

Install the svgmoji package using the npm package manager.

```bash
npm install svgmoji
```

--------------------------------

### Install svgmoji with Yarn

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji/readme.md

Install the svgmoji package using the Yarn package manager.

```bash
yarn add svgmoji
```

--------------------------------

### Usage Example with JavaScript

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__blob/readme.md

Create an image element with a src applied from the CDN. The first time it's used, it loads the sprite of all emojis.

```typescript
import { Blobmoji } from '@svgmoji/blob';
import data from 'svgmoji/emoji.json';

const blobmoji = new Blobmoji({ data, type: 'all' });
const image = document.createElement('img');
image.src = blobmoji.url('❤️');

document.body.append(image);
```

--------------------------------

### Refresh Dependencies

Source: https://github.com/svgmoji/svgmoji/blob/main/docs/contributing.md

An alternative command to clean node_modules and reinstall dependencies, combining 'pnpm clean:all' and 'pnpm install'.

```bash
pnpm refresh
```

--------------------------------

### HTML Emoji Image Examples

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__twemoji/readme.md

Examples of how to use individual emoji images, subgroup bundles, grouped bundles, and the full sprite bundle via HTML img tags.

```html
<!-- Individual -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>

<!-- Subgroup Bundle 12KB  -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/subgroups/face-affection.svg#1F385"
/>

<!-- Grouped Bundle 182KB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>

<!-- Full Sprite Bundle 7.3MB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Usage Example with Openmoji

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__openmoji/readme.md

Create an image element with an emoji source applied from the CDN. The first use loads all emoji sprites.

```typescript
import { Openmoji } from '@svgmoji/openmoji';
import data from 'svgmoji/emoji.json';

const openmoji = new Openmoji({ data, type: 'all' });
const image = document.createElement('img');
image.src = openmoji.url('❤️');

document.body.append(image);
```

--------------------------------

### HTML Usage: Group Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__blob/readme.md

Embed a group bundle of emojis from the CDN. This example shows the 'smileys-emotion' group.

```html
<!-- Group Bundle 421KB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### React Component for SVGmoji

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

This snippet shows how to use the SvgMoji component from the `@svgmoji/noto/react` package to render an emoji in a React application. Ensure the necessary package is installed.

```tsx
import { SvgMoji } from `@svgmoji/noto/react`;

const MyMoji = () => {
  return <SvgMoji unicode='💋' />;
};

```

--------------------------------

### HTML Usage: Subgroup Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__blob/readme.md

Embed a subgroup bundle of emojis from the CDN. This example shows the 'face-affection' subgroup.

```html
<!-- Subgroup Bundle 36KB  -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/sprites/subgroups/face-affection.svg#1F385"
/>
```

--------------------------------

### Build Static Website Content

Source: https://github.com/svgmoji/svgmoji/blob/main/support/website/readme.md

Generate static website content into the build directory, suitable for deployment on any static hosting service.

```bash
pnpm build
```

--------------------------------

### Enable Git Hooks

Source: https://github.com/svgmoji/svgmoji/blob/main/support/root/readme.md

Run this command from the root directory to enable git hooks for the project.

```bash
pnpm checks:enable
```

--------------------------------

### Run Unit Tests

Source: https://github.com/svgmoji/svgmoji/blob/main/docs/contributing.md

Commands to run unit tests. 'pnpm test' runs all unit tests, while 'pnpm test:watch' runs tests for changed files since the last commit.

```bash
pnpm test
pnpm test:watch
```

--------------------------------

### Clean and Reinstall Dependencies

Source: https://github.com/svgmoji/svgmoji/blob/main/docs/contributing.md

Clean the node_modules directory and reinstall dependencies using pnpm. This is useful if you have a previous version of the repository checked out.

```bash
pnpm clean:all
pnpm install
```

--------------------------------

### Import Core Functions

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__core/readme.md

Import PopulatedEmoji and minifyEmoji from the @svgmoji/core package for use in your project.

```typescript
import { PopulatedEmoji, minifyEmoji } from '@svgmoji/core';
```

--------------------------------

### Build and Download Emoji Libraries

Source: https://github.com/svgmoji/svgmoji/blob/main/docs/contributing.md

Commands to build the TypeScript code and manage emoji libraries. 'pnpm emoji:download' downloads emoji libraries, and 'pnpm emoji:sprites' creates sprites for emoji packages.

```bash
pnpm emoji:download
pnpm emoji:sprites
```

--------------------------------

### OpenMoji Full Sprite Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

References the complete sprite containing all emojis. This results in the largest download but provides all assets.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### HTML Usage: Full Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__blob/readme.md

Embed the full bundle of all emojis from the CDN.

```html
<!-- Full Bundle 13.2MB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Full Emoji Sprite Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__noto/readme.md

Includes all emojis in a single sprite file (23.6MB). Use this only if all emojis are needed to avoid excessive loading.

```html
<!-- Full Bundle 23.6MB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/noto/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Disable Git Hooks

Source: https://github.com/svgmoji/svgmoji/blob/main/support/root/readme.md

Run this command from the root directory to disable git hooks for the project.

```bash
pnpm checks:disable
```

--------------------------------

### Generate Emoji Image with Twemoji

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__twemoji/readme.md

Create an image element with a src attribute pointing to a twemoji sprite. The first use loads all emoji sprites from the CDN.

```typescript
import { Twemoji } from '@svgmoji/twemoji';
import data from 'svgmoji/emoji.json';

const twemoji = new Twemoji({ data, type: 'all' });
const image = document.createElement('img');
image.src = twemoji.url('❤️');

document.body.append(image);
```

--------------------------------

### Generate Emoji Image with Notomoji

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__noto/readme.md

Create an image element with an emoji source URL. The first use loads all emoji sprites from the CDN.

```typescript
import { Notomoji } from '@svgmoji/notomoji';
import data from 'svgmoji/emoji.json';

const notomoji = new Notomoji({ data, type: 'all' });
const image = document.createElement('img');
image.src = notomoji.url('❤️');

document.body.append(image);
```

--------------------------------

### Use Function Declarations for Top-Level Functions

Source: https://github.com/svgmoji/svgmoji/blob/main/docs/contributing.md

Prefer function declarations for top-level functions. This improves readability and hoisting behavior compared to arrow functions for standalone functions.

```ts
// ✅ - GOOD
function doSomething(something: string) {
  return `Cannot do ${something}`;
}

// ❌ - BAD
const doSomething = (something: string) => {
  return `Cannot do ${something}`;
};
```

--------------------------------

### Individual Emoji Image

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__noto/readme.md

Use this for a single emoji, resulting in a small 2KB file size.

```html
<!-- Individual 2KB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/noto@0.2.0/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>
```

--------------------------------

### HTML Usage: Individual Emoji

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__blob/readme.md

Use individual emoji SVGs directly from the CDN.

```html
<!-- Individual -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>
```

--------------------------------

### Notomoji with Group Sprite Type

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Initializes Notomoji to reference emoji groups from the CDN sprite. This offers a balance between download size and emoji availability.

```typescript
// Will load the cdn sprite for the emoji groups.
// There are 10 groups in total some of which rarely get used.
const groupNotomoji = new Notomoji({ data, type: 'group' });
```

--------------------------------

### Notomoji with Individual URL Type

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Sets Notomoji to load each emoji as a direct URL. This is efficient for codebases with infrequent emoji usage.

```typescript
// Loads each emoji as a direct url. This is useful if emoji are
// rarely used in your codebase.
const individualNotomoji = new Notomoji({ data, type: 'individual' });
```

--------------------------------

### Notomoji with Subgroup Sprite Type

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Configures Notomoji to use subgroup sprites, reducing download size but potentially causing slower load times if many different subgroups are used.

```typescript
// Will load the cdn sprite for the subgroup. Smaller download size,
// but if you are using a large variety of emoji, it could lead to
// delayed load times.
const subGroupNotomoji = new Notomoji({ data, type: 'subgroup' });
```

--------------------------------

### Individual Twemoji SVG

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Use this for displaying a single Twemoji as an SVG. Ensure correct `src` path and `alt`/`title` attributes for accessibility.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>
```

--------------------------------

### Full Sprite Bundle SVGmoji Blob

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Displays an emoji using the complete sprite sheet containing all available emojis. This method is efficient for accessing any emoji within the library.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### OpenMoji Subgroup Sprite

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Embeds emojis from a specific subgroup sprite. Offers a smaller download size compared to the full sprite.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/sprites/subgroups/face-affection.svg#1F385"
/>
```

--------------------------------

### OpenMoji Group Sprite

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Uses a grouped sprite for emojis, balancing download size and variety. Suitable for common emoji groups.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Individual OpenMoji SVG

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Displays a single OpenMoji emoji as an individual SVG image. Useful for infrequent emoji usage.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>
```

--------------------------------

### Subgroup Bundle HTML

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__openmoji/readme.md

Embed emojis from a specific subgroup using a sprite sheet.

```html
<!-- Subgroup Bundle 9KB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/sprites/subgroups/face-affection.svg#1F385"
/>
```

--------------------------------

### Full Sprite Bundle HTML

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__openmoji/readme.md

Embed emojis using the complete sprite sheet for all emojis.

```html
<!-- Full Sprite Bundle 6.6MB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Individual SVGmoji Blob

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Use this snippet to display a single emoji as an SVG. Ensure the correct CDN path and emoji unicode are used.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>
```

--------------------------------

### Grouped Bundle HTML

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__openmoji/readme.md

Embed emojis from a larger group using a sprite sheet.

```html
<!-- Grouped Bundle 201KB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Twemoji Full Sprite Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Utilizes the complete Twemoji sprite sheet for embedding emojis. The fragment identifier is crucial for selecting the desired emoji.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Subgroup Emoji Sprite Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__noto/readme.md

Embeds a subgroup of emojis (e.g., face-affection) into a single sprite, reducing load time for related emojis.

```html
<!-- Subgroup Bundle 31KB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/noto/sprites/subgroups/face-affection.svg#1F385"
/>
```

--------------------------------

### Grouped Bundle SVGmoji Blob

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Renders an emoji from a larger group sprite. This is useful for displaying emojis that belong to a specific category, like smileys and emotions.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Group Emoji Sprite Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__noto/readme.md

Bundles emojis by category (e.g., smileys-emotion) into a larger sprite, useful for pages with many emojis from the same group.

```html
<!-- Group Bundle 417KB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/noto/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Twemoji Group Sprite Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Integrates a group of Twemojis from a sprite sheet. The fragment identifier points to the specific emoji within the larger group sprite.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Subgroup Bundle SVGmoji Blob

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Embeds a collection of related emojis from a subgroup sprite. The '#' followed by the emoji unicode specifies which emoji to render from the sprite.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/sprites/subgroups/face-affection.svg#1F385"
/>
```

--------------------------------

### Noto All Emojis Sprite

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Embeds an emoji from the complete Noto emoji sprite sheet. This provides access to all emojis but has a larger file size (comment indicates 3.8MB GZIP).

```html
<!-- GZIP 3.8MB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```

--------------------------------

### Declare Components with Const Arrow Functions

Source: https://github.com/svgmoji/svgmoji/blob/main/docs/contributing.md

Use `const` with arrow functions when declaring React components. This is a preferred style for component definition.

```tsx
const MyComponent = () => {
  return <div />;
};
```

--------------------------------

### Individual Emoji HTML

Source: https://github.com/svgmoji/svgmoji/blob/main/packages/svgmoji__openmoji/readme.md

Embed a single emoji as an image using its CDN path.

```html
<!-- Individual -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>
```

--------------------------------

### Twemoji Subgroup Sprite Bundle

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Embeds a subgroup of Twemojis from a sprite sheet. The `#` fragment identifier specifies the emoji within the sprite.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/subgroups/face-affection.svg#1F385"
/>
```

--------------------------------

### Noto Emoji Sprite Subgroup

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Embeds an emoji from a subgroup within the Noto emoji sprite sheet. This allows for efficient loading of related emojis.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/sprites/subgroups/face-affection.svg#1F385"
/>
```

--------------------------------

### Individual Noto Emoji SVG

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Embeds a single emoji from the Noto library using its direct SVG path. This is useful for displaying specific emojis.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>
```

--------------------------------

### Noto Emoji Sprite Group

Source: https://github.com/svgmoji/svgmoji/blob/main/readme.md

Embeds an emoji from a larger group within the Noto emoji sprite sheet. This is suitable for loading sets of emojis.

```html
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>
```
Tokens:
Raw