Teamleader UI Illustrations

Downloads in past


461.16.1a month ago5 years agoMinified + gzip package size for @teamleader/ui-illustrations in KB


Teamleader UI Illustrations
Illustrations used in the Teamleader application(s), both as SVG and matching React-based implementation.


Teamleader's illustrations package is available on npm.
$ npm install --save @teamleader/ui-illustrations

$ yarn install @teamleader/ui-illustrations

If you're already using teamleader-ui in your application, you can access the illustrations using the sub-repo notation '@teamleader-ui/illustrations'.


import React from 'react';
import { render } from 'react-dom';
import { IllustrationEmptyStateMeetings120x120Static } from '@teamleader/ui-illustrations';

const App = () => {
  return (
    <IllustrationEmptyStateMeetings120x120Static />

render(<App />, document.querySelector('#app'));



  • node ^12.0.0
  • npm ^6.9.0

Getting started

Clone this repo
$ git clone https://github.com/teamleadercrm/ui-illustrations.git

Add your newly designed SVG files to the /illustrations folder. Make sure they are named properly using the dimensions_name_variant.svg syntax, eg: 120x120_empty_state_meeting_static.svg or 240x240_task_list_dynamic.svg.
Don't forget to transform your newly added SVGs to React components by running
$ npm run build

If you are satisfied with your updates, make sure to bump the version number in the package.json file and publish it for others to use by running
$ npm publish --access=public