[API reference](https://evolu.dev/docs/api-reference) › [@evolu/common](https://evolu.dev/docs/api-reference/common) › [Identicon](https://evolu.dev/docs/api-reference/common/Identicon) › createIdenticon

```ts
function createIdenticon(
  id: string & Brand<"Id">,
  style?: IdenticonStyle,
): Identicon;
```

Defined in: [packages/common/src/Identicon.ts:58](https://github.com/evoluhq/evolu/blob/037c390af081e9944d616ff298a729515c5c5ab7/packages/common/src/Identicon.ts#L58)

Creates a deterministic identicon SVG from an [Id](https://evolu.dev/docs/api-reference/common/Type/variables/Id).

Works with any [Id](https://evolu.dev/docs/api-reference/common/Type/variables/Id) including branded IDs like `OwnerId`, etc.

Available styles:

- `"github"` (default): 5x5 grid with horizontal mirroring (GitHub-style)
- `"quadrant"`: 2x2 grid with direct RGB color mapping from bytes
- `"gradient"`: Diagonal stripes with smooth color gradients
- `"sutnar"`: Three compositional variants with adaptive colors

### Example

```ts
import {
  assertEqual,
  assertTrue,
  createIdFromString,
  createIdenticon,
} from "@evolu/common";

const id = createIdFromString("identicon-example");
const svg = createIdenticon(id);
const styles = ["quadrant", "gradient", "sutnar"] as const;
const alternativeSvgs = styles.map((style) => createIdenticon(id, style));

// Branded IDs work too.
const todoId = createIdFromString<"Todo">("todo-1");
const todoSvg = createIdenticon(todoId);

assertTrue(svg.startsWith("<svg"));
assertEqual(new Set([svg, ...alternativeSvgs]).size, 4);
assertTrue(todoSvg.startsWith("<svg"));
```