Appearance

Return to top

How to use the library with React? ​

To use the JS-Library with React, we convert the SVG to a data URI and use it as the src.

jsx
import { useMemo } from 'react';
import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

function App() {
  const avatar = useMemo(() => {
    return createAvatar(lorelei, {
      size: 128,
      // ... other options
    }).toDataUriSync();
  }, []);

  return <img src={avatar} alt="Avatar" />;
}

export default App;
import { useMemo } from 'react';
import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

function App() {
  const avatar = useMemo(() => {
    return createAvatar(lorelei, {
      size: 128,
      // ... other options
    }).toDataUriSync();
  }, []);

  return <img src={avatar} alt="Avatar" />;
}

export default App;
Adventurer by Lisa Wischofsky / CC BY 4.0. Avataaars by Pablo Stanley / Free for personal and commercial use. Face Generator by The Visual Team / CC BY 4.0. Custom Avatar by Ashley Seo / CC BY 4.0. Bottts by Pablo Stanley / Free for personal and commercial use. Croodles - Doodle your face by vijay verma / CC BY 4.0. Fun Emoji Set by Davis Uche / CC BY 4.0. Bootstrap Icons by The Bootstrap Authors / MIT. Lorelei by Lisa Wischofsky / CC0 1.0. Avatar Illustration System by Micah Lanier / CC BY 4.0. Miniavs - Free Avatar Creator by Webpixels / CC BY 4.0. Notionists by Zoish / CC0 1.0. Open Peeps by Pablo Stanley / CC0 1.0. Personas by Draftbit by Draftbit - draftbit.com / CC BY 4.0. - All avatars are remixes of the original works.