# Use custom icon on launcher item

**URL:** <https://discourse.jupyter.org/t/use-custom-icon-on-launcher-item/5403>\
**Category:** JupyterLab\
**Created:** [July 28, 2020, 11:29am UTC](https://discourse.jupyter.org/t/use-custom-icon-on-launcher-item/5403 "2020-07-28T11:29:04Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![bollwyvl](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/bollwyvl/32/904_2.png) [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)\
**Post date:** [July 29, 2020, 2:21am UTC](https://discourse.jupyter.org/t/use-custom-icon-on-launcher-item/5403/2 "2020-07-29T02:21:27Z")

</div>

Yeah, [kernels are needfully special](https://github.com/jupyterlab/jupyterlab/blob/6eec51b81635b6c379b623e3c53cc3589020a111/packages/launcher/src/index.tsx#L331-L337), as they serve up pngs from the backend, rather than a `LabIcon`.

The `svgStr` of a `LabIcon` needs to be an [actual SVG](https://github.com/jupyterlab/jupyterlab/blob/b5024e97f8b9160dd9cef70d619027fbf7a47aa7/packages/ui-components/src/icon/labicon.tsx#L635-L638). You’ll want to

- (optionally) [make a typing override](https://github.com/yuvipanda/jupyter-videochat/blob/c77513f4a4da26fcbd0ec4ff4a689464f292028f/src/typings.d.ts#L1-L4)
- prepare your SVG
  - make _sure_ it’s well formed (proper XML declarations, etc)
    - get rid of all `id` attributes
    - clean up all the cruft you can
    - [inkscape](https://inkscape.org/) is good for this, with it’s _Optimized SVG_ export format
    - [svgo](https://www.npmjs.com/package/svgo) _can_ be useful if you have a _ton_ of icons, but does have some binary dependencies that can be… exciting…

  - add `class` [hints](https://github.com/jupyterlab/jupyterlab/blob/b5024e97f8b9160dd9cef70d619027fbf7a47aa7/packages/ui-components/style/icons/filetype/notebook.svg?short_path=24a197b#L2), so that it looks good on light and dark backgrounds
    - the [docs](https://jupyterlab.readthedocs.io/en/stable/developer/ui_components.html#ui-components) are good

- [import your SVG](https://github.com/yuvipanda/jupyter-videochat/blob/c77513f4a4da26fcbd0ec4ff4a689464f292028f/src/icons.ts#L2)
- [make your icon](https://github.com/yuvipanda/jupyter-videochat/blob/c77513f4a4da26fcbd0ec4ff4a689464f292028f/src/icons.ts#L4-L7)
- [use it in a command](https://github.com/yuvipanda/jupyter-videochat/blob/c77513f4a4da26fcbd0ec4ff4a689464f292028f/src/index.ts#L70-L81)

and i think you have the rest!

---

_[View the full topic](https://discourse.jupyter.org/t/use-custom-icon-on-launcher-item/5403)._