Skip to content

Identicon

<quiet-identicon> stable since 3.1

Generates deterministic pixel-art patterns from an arbitrary string.

Identicons are decorative visuals that generate unique, symmetric pixel-art patterns from any input string. The same input always produces the same visual, making them useful as default avatars or visual identifiers. 

<quiet-identicon value="mochi@example.com" label="Mochi"></quiet-identicon>
<quiet-identicon value="bean@example.com" label="Bean"></quiet-identicon>
<quiet-identicon value="pip@example.com" label="Pip"></quiet-identicon>
<quiet-identicon value="bubbles@example.com" label="Bubbles"></quiet-identicon>
<quiet-identicon value="pancake@example.com" label="Pancake"></quiet-identicon>

Examples Jump to heading

Basic usage Jump to heading

Provide a value to generate an identicon and a label for accessibility. When no label is provided, the identicon will be hidden from assistive devices. Nothing will be rendered if value is empty.

Each unique string produces a deterministic pattern and color.

<quiet-identicon value="mittens@example.com" label="Sample Identicon" pixel-size="10" cols="7" rows="7" id="identicon__basic"></quiet-identicon>
<quiet-text-field label="Value" value="mittens@example.com" with-clear id="identicon__basic-value" style="margin-block-start: 1rem;"></quiet-text-field>

<script>
  (() => {
    const identicon = document.getElementById('identicon__basic');
    const valueField = document.getElementById('identicon__basic-value');

    valueField.addEventListener('input', () => {
      identicon.value = valueField.value;
      identicon.label = valueField.value;
    });
  })();
</script>

Changing the size Jump to heading

Use pixel-size to control how large each cell is rendered by default. The rendered width is cols × pixel-size and the height is rows × pixel-size. 

<quiet-identicon
  value="Change the size"
  label="4px pixels"
  pixel-size="6"
></quiet-identicon>

<quiet-identicon
  value="Change the size"
  label="8px pixels"
  pixel-size="8"
></quiet-identicon>

<quiet-identicon
  value="Change the size"
  label="12px pixels"
  pixel-size="12"
></quiet-identicon>

<quiet-identicon
  value="Change the size"
  label="16px pixels"
  pixel-size="16"
></quiet-identicon>

If a custom width or height is applied to the host element, the grid will stretch or shrink to fill the given dimensions. 

<quiet-identicon
  value="Custom sizes"
  label="Default"
  pixel-size="8"
></quiet-identicon>

<quiet-identicon
  value="Custom sizes"
  label="Stretched to 50×100"
  pixel-size="8"
  style="width: 50px; height: 100px;"
></quiet-identicon>

<quiet-identicon
  value="Custom sizes"
  label="Wide"
  pixel-size="8"
  style="width: 100px; height: 50px;"
></quiet-identicon>

Gaps Jump to heading

Set the gap CSS property on the host element to add spacing between pixels.

<quiet-identicon
  value="Gap sizes"
  label="No gap"
  pixel-size="10"
></quiet-identicon>

<quiet-identicon
  value="Gap sizes"
  label="1px gap"
  pixel-size="10"
  style="gap: 1px;"
></quiet-identicon>

<quiet-identicon
  value="Gap sizes"
  label="2px gap"
  pixel-size="10"
  style="gap: 2px;"
></quiet-identicon>

Columns and rows Jump to heading

Use cols and rows to control the grid dimensions independently. Columns are forced to an odd number for horizontal symmetry. 

<quiet-identicon
  value="grid-demo"
  label="5×5"
  pixel-size="10"
  cols="5"
  rows="5"
></quiet-identicon>

<quiet-identicon
  value="grid-demo"
  label="7×7"
  pixel-size="10"
  cols="7"
  rows="7"
></quiet-identicon>

<quiet-identicon
  value="grid-demo"
  label="9×9"
  pixel-size="10"
  cols="9"
  rows="9"
></quiet-identicon>

<quiet-identicon
  value="grid-demo"
  label="11×11"
  pixel-size="10"
  cols="11"
  rows="11"
></quiet-identicon>

Non-square grids are also supported.

<quiet-identicon
  value="non-square"
  label="Wide"
  pixel-size="10"
  cols="9"
  rows="5"
></quiet-identicon>

<quiet-identicon
  value="non-square"
  label="Tall"
  pixel-size="10"
  cols="5"
  rows="9"
></quiet-identicon>

<quiet-identicon
  value="non-square"
  label="Banner"
  pixel-size="8"
  cols="11"
  rows="3"
></quiet-identicon>

Shapes Jump to heading

Use the shape attribute to change the shape of each filled pixel. Available shapes are square (default), rounded, and circle. 

<quiet-identicon
  value="Shapes demo"
  label="square"
  pixel-size="10"
  shape="square"
></quiet-identicon>

<quiet-identicon
  value="Shapes demo"
  label="rounded"
  pixel-size="10"
  shape="rounded"
></quiet-identicon>

<quiet-identicon
  value="Shapes demo"
  label="circle"
  pixel-size="10"
  shape="circle"
></quiet-identicon>

Custom colors Jump to heading

Use the colors attribute to provide a semicolon-delimited list of colors. You can use any valid CSS color format. When more than one color is provided, a single color is chosen deterministically from the list based on the input value. 

<quiet-identicon
  value="Change colors"
  label="Fire"
  pixel-size="10"
  colors="#a72727; #f42525; #ff3333; #ff981d; #ffff1c; #ffffb7"
></quiet-identicon>

<quiet-identicon
  value="Change colors"
  label="Earth"
  pixel-size="10"
  colors="#572a08; #9e4614; #d48209; #65a414; #486e1a; #223d07"
></quiet-identicon>

<quiet-identicon
  value="Change colors"
  label="Ocean"
  pixel-size="10"
  colors="#0f6291; #048bd4; #02aeff; #08f0ff; #2dffff; #daffff"
></quiet-identicon>

Multicolor Jump to heading

Add the multicolor attribute to assign a different color from the palette to each filled pixel instead of using a single uniform color. 

<quiet-identicon value="stormy" label="Stormy" multicolor></quiet-identicon>
<quiet-identicon value="bella" label="Bella" multicolor></quiet-identicon>
<quiet-identicon value="pillow" label="Pillow" multicolor></quiet-identicon>

You can combine multicolor with a custom palette via colors for a themed look. 

<quiet-identicon 
  value="stormy"
  label="Stormy"
  multicolor
  colors="#8b6f47; #6b7d3e; #7a8a45; #5e7a4a; #9c7a50"
></quiet-identicon>

<quiet-identicon 
  value="bella"
  label="Bella"
  multicolor
  colors="#8b6f47; #6b7d3e; #7a8a45; #5e7a4a; #9c7a50"
></quiet-identicon>

<quiet-identicon 
  value="pillow"
  label="Pillow"
  multicolor
  colors="#8b6f47; #6b7d3e; #7a8a45; #5e7a4a; #9c7a50"
></quiet-identicon>

Styling identicons Jump to heading

Use standard CSS properties such as background, border-radius, padding, gap, box-shadow, and clip-path to customize the identicon's appearance. 

<quiet-identicon
  value="thistle@example.com"
  label="Rounded with background"
  shape="rounded"
  pixel-size="12"
  style="
    background: linear-gradient(135deg, #0a1a1f, #2a5a6a);
    border-radius: 0;
    padding: 0.5rem;
    box-shadow: inset 0 2px 8px rgb(255 255 255 / 0.08);
  "
></quiet-identicon>

<quiet-identicon
  value="plum@example.com"
  label="With gap"
  pixel-size="12"
  shape="circle"
  style="
    background: linear-gradient(135deg, #f3f5f8, #e4eaf2);
    border-radius: var(--quiet-border-radius-lg);
    gap: 1px;
    padding: 0.5rem;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 2px 8px rgb(0 0 0 / 0.1);
  "
></quiet-identicon>

<quiet-identicon
  value="captainbean@example.com"
  label="Circular"
  pixel-size="12"
  style="
    background: linear-gradient(135deg, #3d366e, #7b5dd4);
    border-radius: 50%;
    gap: 1px;
    padding: 0.5rem;
    box-shadow: inset 0 2px 8px rgb(255 255 255 / 0.08);
  "
></quiet-identicon>

You can also use the pixel CSS part to apply custom clip-path shapes to each pixel. 

<quiet-identicon 
  value="olive@example.com"
  label="Star"
  pixel-size="12"
  id="identicon__star"
></quiet-identicon>

<quiet-identicon 
  value="hazel@example.com"
  label="Heart"
  pixel-size="12"
  style="gap: 1px;"
  id="identicon__heart"
></quiet-identicon>

<quiet-identicon 
  value="ember@example.com"
  label="Cross"
  pixel-size="12"
  style="gap: 1px;"
  id="identicon__cross"
></quiet-identicon>

<style>
  #identicon__star::part(pixel) {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }

  #identicon__heart::part(pixel) {
    clip-path: polygon(50% 12%, 60% 0%, 80% 0%, 100% 15%, 100% 40%, 50% 100%, 0% 40%, 0% 15%, 20% 0%, 40% 0%);
  }

  #identicon__cross::part(pixel) {
    clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);
  }
</style>

Using as avatars Jump to heading

Identicons work nicely as default avatars when placed inside a <quiet-avatar> using the icon slot. Size the identicon's grid to fill the avatar's icon area, which is half of --size.

whiskers@example.com
mittens@example.com
shadow@example.com 
<div id="identicon__avatars">
  <div class="avatar-row">
    <quiet-avatar label="Whiskers">
      <quiet-identicon slot="icon" value="whiskers@example.com" pixel-size="3" cols="7" rows="7"></quiet-identicon>
    </quiet-avatar>
    <span>whiskers@example.com</span>
  </div>

  <div class="avatar-row">
    <quiet-avatar label="Mittens">
      <quiet-identicon slot="icon" value="mittens@example.com" pixel-size="3" cols="7" rows="7"></quiet-identicon>
    </quiet-avatar>
    <span>mittens@example.com</span>
  </div>

  <div class="avatar-row">
    <quiet-avatar label="Shadow">
      <quiet-identicon slot="icon" value="shadow@example.com" pixel-size="3" cols="7" rows="7"></quiet-identicon>
    </quiet-avatar>
    <span>shadow@example.com</span>
  </div>
</div>

<style>
  #identicon__avatars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .avatar-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    quiet-avatar {
      --size: 42px;
      background-color: var(--quiet-neutral-fill-louder);
    }
  }
</style>

Wallpaper Jump to heading

Identicons can be tiled to create a decorative wallpaper pattern.

<div id="identicon__wallpaper">
  <quiet-identicon value="w01" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w02" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w03" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w04" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w05" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w06" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w07" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w08" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w09" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w10" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w11" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w12" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w13" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w14" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w15" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w16" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w17" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w18" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w19" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w20" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w21" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w22" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w23" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w24" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w25" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w26" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w27" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w28" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w29" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w30" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w31" cols="5" rows="5"></quiet-identicon>
  <quiet-identicon value="w32" cols="5" rows="5"></quiet-identicon>
</div>

<style>
  #identicon__wallpaper {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    justify-items: center;
    gap: 1rem;
    background: #0e0f10;
    padding: 1rem;
    border-radius: 8px;
  }

  @media (max-width: 640px) {
    #identicon__wallpaper {
      grid-template-columns: repeat(4, 1fr);
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN Self-hosted

To manually import <quiet-identicon> from the CDN, use the following code.

import 'https://cdn.quietui.org/v4.0.0/components/identicon/identicon.js';

To manually import <quiet-identicon> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path. 

import '/path/to/quiet/components/identicon/identicon.js';

Properties Jump to heading

Identicon has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property Description Reflects Type Default
value The input string to generate the identicon from. The same string always produces the same visual. string ''
label An accessible label for the identicon. This won't be visible, but it will be read to assistive devices. When no label is provided, the identicon is treated as decorative and hidden from assistive devices. string
undefined
pixelSize
pixel-size 		The size of each pixel cell in pixels. number 8
cols The number of columns in the grid. Will be forced to an odd number for horizontal symmetry. number 5
rows The number of rows in the grid. number 5
colors A semicolon-delimited list of colors to use for the identicon. You can use any valid CSS color format. Defaults to the Quiet UI theme palette.
shape The shape of each filled pixel cell. 'circle'
'square'
'rounded' 		'square'
multicolor When enabled, each filled pixel gets a different color from the palette instead of a single uniform color. boolean false

CSS custom properties Jump to heading

Identicon supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name Description Default
--roundness The border radius applied to exposed corners when using the rounded shape. For best results, use a percentage from 0% to 50%. 33%

CSS parts Jump to heading

Identicon exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name Description CSS selector
pixel An individual pixel cell in the grid. ::part(pixel)
col-n A pixel in column n, where n is the column number. ::part(col-n)
row-n A pixel in row n, where n is the row number. ::part(row-n)
Search this website Toggle dark mode View the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X

    No results found