https://github.com/ajhenry/prettyavatars
A collection of pretty default avatars to use in your next project ✨
https://github.com/ajhenry/prettyavatars
avatar avatar-component avatar-generator avatars beautiful cdn hacktoberfest hacktoberfest2023 pretty react svg typescript
Last synced: 2 months ago
JSON representation
A collection of pretty default avatars to use in your next project ✨
- Host: GitHub
- URL: https://github.com/ajhenry/prettyavatars
- Owner: ajhenry
- License: mit
- Created: 2023-08-09T01:13:36.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-28T03:26:50.000Z (about 2 years ago)
- Last Synced: 2025-07-26T15:44:35.861Z (2 months ago)
- Topics: avatar, avatar-component, avatar-generator, avatars, beautiful, cdn, hacktoberfest, hacktoberfest2023, pretty, react, svg, typescript
- Language: TypeScript
- Homepage: https://prettyavatars.com
- Size: 2.94 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# prettyavatars
**prettyavatars** is collection of pretty default avatars to use in your next project ✨
All avatars are SVG-based and are generated based on the name and color palette you provide 🎨
_Also available as a standalone [React package](https://www.npmjs.com/package/prettyavatars)_
[Avatars](#avatars) •
[API](#api) •
[Installation](#installation)
## Avatars
### letter
#### CDN URL
```url
https://prettyavatars.com/api/letter/100
```
#### React Component
```jsx
import Avatar from 'prettyavatars'
```
### letter-plain
#### CDN
```url
https://prettyavatars.com/api/letter-plain/100
```
#### React
```jsx
import Avatar from 'prettyavatars'
```
### smile
#### CDN
```url
https://prettyavatars.com/api/smile/100
```
### pixel-art
Credit goes to [laurentpayot/minidenticons](https://github.com/laurentpayot/minidenticons)
#### CDN
```url
https://prettyavatars.com/api/pixel-art/100
```
#### React
```jsx
import Avatar from 'prettyavatars'
```
### beam
Credit goes to [boringdesigners/boring-avatars](https://github.com/boringdesigners/boring-avatars)
#### CDN
```url
https://prettyavatars.com/api/beam/100
```
#### React
```jsx
import Avatar from 'prettyavatars'
```
### bauhaus
Credit goes to [boringdesigners/boring-avatars](https://github.com/boringdesigners/boring-avatars)
#### CDN
```url
https://prettyavatars.com/api/bauhaus/100
```
#### React
```jsx
import Avatar from 'prettyavatars'
```
### ring
Credit goes to [boringdesigners/boring-avatars](https://github.com/boringdesigners/boring-avatars)
#### CDN
```url
https://prettyavatars.com/api/ring/100
```
#### React
```jsx
import Avatar from 'prettyavatars'
```
### sunset
Credit goes to [boringdesigners/boring-avatars](https://github.com/boringdesigners/boring-avatars)
#### CDN
```url
https://prettyavatars.com/api/sunset/100
```
#### React
```jsx
import Avatar from 'prettyavatars'
```
### marble
Credit goes to [boringdesigners/boring-avatars](https://github.com/boringdesigners/boring-avatars)
#### CDN
```url
https://prettyavatars.com/api/marble/100
```
#### React
```jsx
import Avatar from 'prettyavatars'
```
## API
The API is available at `https://prettyavatars.com/api`
With the following query parameter options:
```txt
variant: string
The avatar variant to use
Default: "letter"
size: number
The size of the avatar in pixels
Default: 100
name: string
The name of the avatar
Default: "John Doe"
colors: string
Comma-separated list of html colors
Default: "#BF616A, #D08770, #EBCB8B, #A3BE8C, #B48EAD"
random-name: boolean
Whether to generate a random name
Default: false
random-all: boolean
Whether to randomize all avatar properties (except square)
Default: false
random-color: boolean
Whether to randomize the avatar color
Default: false
```
Or all together:
#### CDN
```url
https://prettyavatars.com/api/{VARIENT}/{SIZE}?name={NAME}&colors={COLORS}
```
## Installation
To use this package with React you can install it with the package manager of your choice:
```bash
yarn install prettyavatars
npm install prettyavatars
pnpm install prettyavatars
```
To see the full list of available avatars, check out the [Avatars](#avatars) section.