TextIcon generates icons based on the initials of a name.

• Full CSS font customization
• The letters are visually centered
• The background can be a circle or a square
• The hue is generated based on the name
  • A randomSeed can be provided to the hue algorithm

npm install texticon

import TextIcon from "texticon";

const name = "Awesome Name";
const icon = document.querySelector("#icon");
icon.src = TextIcon(name, {
    circle: true,
    size: 256,
    font: "128px Helvetica",
    randomSeed: 1234,
    foreground: {
        lightness: 0.5
    },
    background: {
        saturation: 0.2,
        lightness: 0.9
    }
});

The size of the image in pixels. Default is 256.

The CSS font value. Default is "128px sans-serif".

Whether to render the background as a circle or not. Default is false.

A seed used when generating the color of the icon based on its name. Randomize this value at each call if you want the same name to have different colors each time. Default is 0.

These parameters adjust how the background color looks. The following values range from 0 to 1.

• saturation: The saturation of the background color. Default is 0.5.
• lightness: The lightness of the background color. Default is 0.8.
• alpha: The opacity of the background color. Default is 1.

The properties from background can also be used for adjusting the text color.

• saturation: Default is 0.5.
• lightness: Default is 0.5.
• alpha: Default is 1.

This project is licensed under the MIT License - see the LICENSE file for details.

• isaacwritescode for naming this project.
• MatthewCallis for avatar, which served as the groundwork for TextIcon.