diff --git a/packages/celltags/src/addwidget.ts b/packages/celltags/src/addwidget.ts
index a8ae0e6b9dcc..167d199cdad6 100644
--- a/packages/celltags/src/addwidget.ts
+++ b/packages/celltags/src/addwidget.ts
@@ -1,6 +1,6 @@
 import { Widget } from '@lumino/widgets';
 
-import { defaultIconRegistry } from '@jupyterlab/ui-components';
+import { addIcon } from '@jupyterlab/ui-components';
 
 import { TagTool } from './tool';
 
@@ -31,18 +31,16 @@ export class AddWidget extends Widget {
     let tag = document.createElement('div');
     tag.className = 'tag-holder';
     tag.appendChild(text);
-    let img = document.createElement('span');
-    defaultIconRegistry.icon({
-      name: 'add',
-      container: img,
+    let iconContainer = addIcon.element({
+      tag: 'span',
       center: true,
       height: '18px',
       width: '18px',
-      marginLeft: '3px',
+      marginLeft: '3px',s
       marginRight: '-5px'
     });
     this.addClass('unapplied-tag');
-    tag.appendChild(img);
+    tag.appendChild(iconContainer);
     this.node.appendChild(tag);
   }
 
diff --git a/packages/celltags/src/widget.ts b/packages/celltags/src/widget.ts
index 1f8709933c43..5ce0327229da 100644
--- a/packages/celltags/src/widget.ts
+++ b/packages/celltags/src/widget.ts
@@ -1,6 +1,6 @@
 import { Widget } from '@lumino/widgets';
 
-import { defaultIconRegistry } from '@jupyterlab/ui-components';
+import { checkIcon } from '@jupyterlab/ui-components';
 
 import { TagTool } from './tool';
 
@@ -29,10 +29,8 @@ export class TagWidget extends Widget {
     let tag = document.createElement('div');
     tag.className = 'tag-holder';
     tag.appendChild(text);
-    let img = document.createElement('span');
-    defaultIconRegistry.icon({
-      name: 'check',
-      container: img,
+    let iconContainer = checkIcon.element({
+      tag: 'span',
       center: true,
       height: '18px',
       width: '18px',
@@ -43,9 +41,9 @@ export class TagWidget extends Widget {
       this.addClass('applied-tag');
     } else {
       this.addClass('unapplied-tag');
-      img.style.display = 'none';
+      iconContainer.style.display = 'none';
     }
-    tag.appendChild(img);
+    tag.appendChild(iconContainer);
     this.node.appendChild(tag);
   }
 
diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index 0cc34a72c9ce..3db7acabd072 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1812,20 +1812,21 @@ export namespace DirListing {
       const text = DOMUtils.findElement(node, ITEM_TEXT_CLASS);
       const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
-      let icon = fileType?.iconRenderer
-        ? fileType.iconRenderer
-        : fileType?.iconClass
-        ? JLIcon.get(fileType.iconClass)
-        : fileIcon;
-      let iconClass = classes(ITEM_ICON_CLASS, fileType?.iconClass);
-
-      // render the icon svg node
-      icon.element({
-        className: iconClass,
+      const iconProps: JLIcon.IProps = {
+        className: ITEM_ICON_CLASS,
         container: iconContainer,
         center: true,
         kind: 'listing'
-      });
+      };
+
+      // render the icon svg node
+      if (fileType?.iconRenderer) {
+        fileType.iconRenderer.element(iconProps);
+      } else if (fileType?.iconClass) {
+        JLIcon.getElement({name: fileType.iconClass, ...iconProps});
+      } else {
+        fileIcon.element(iconProps);
+      }
 
       let hoverText = 'Name: ' + model.name;
       // add file size to pop up if its available
diff --git a/packages/settingeditor/src/pluginlist.tsx b/packages/settingeditor/src/pluginlist.tsx
index 88dd441ab43b..47700d570088 100644
--- a/packages/settingeditor/src/pluginlist.tsx
+++ b/packages/settingeditor/src/pluginlist.tsx
@@ -261,7 +261,6 @@ namespace Private {
       const itemTitle = `${schema.description}\n${id}\n${version}`;
       const iconClass = getHint(ICON_CLASS_KEY, registry, plugin);
       const iconTitle = getHint(ICON_LABEL_KEY, registry, plugin);
-      const icon = JLIcon.get(iconClass, settingsIcon);
 
       return (
         <li
@@ -270,7 +269,7 @@ namespace Private {
           key={id}
           title={itemTitle}
         >
-          <icon.react title={iconTitle} tag={'span'} kind={'settingsEditor'} />
+          <JLIcon.getReact name={iconClass} fallback={settingsIcon} title={iconTitle} tag="span" kind="settingsEditor" />
           <span>{schema.title || id}</span>
         </li>
       );
diff --git a/packages/ui-components/src/icon/jlicon.tsx b/packages/ui-components/src/icon/jlicon.tsx
index 5a1aa002ab53..08725d98bb48 100644
--- a/packages/ui-components/src/icon/jlicon.tsx
+++ b/packages/ui-components/src/icon/jlicon.tsx
@@ -14,15 +14,15 @@ import badSvg from '../../style/debug/bad.svg';
 import blankSvg from '../../style/debug/blank.svg';
 
 export class JLIcon {
-  private static _instances = new Map<string, JLIcon>();
   private static _debug: boolean = false;
+  private static _instances = new Map<string, JLIcon>();
 
   /**
-   * Get any existing JLIcon instance by name
+   * Get any existing JLIcon instance by name.
    *
-   * @param name - Name of the JLIcon instance to fetch
+   * @param name - name of the JLIcon instance to fetch
    *
-   * @param fallback - Optional default JLIcon instance to use if
+   * @param fallback - optional default JLIcon instance to use if
    * name is not found
    *
    * @returns A JLIcon instance
@@ -48,17 +48,17 @@ export class JLIcon {
    * Get any existing JLIcon instance by name, construct a DOM element
    * from it, then return said element.
    *
-   * @param name - Name of the JLIcon instance to fetch
+   * @param name - name of the JLIcon instance to fetch
    *
-   * @param fallback - If left undefined, use automatic fallback to
+   * @param fallback - if left undefined, use automatic fallback to
    * icons-as-css-background behavior: elem will be constructed using
    * a blank icon with `elem.className = classes(name, props.className)`,
    * where elem is the return value. Otherwise, fallback can be used to
    * define the default JLIcon instance, returned whenever lookup fails
    *
-   * @param props = passed directly to JLIcon.element
+   * @param props - passed directly to JLIcon.element
    *
-   * @returns An SVGElement
+   * @returns an SVGElement
    */
   static getElement({
     name,
@@ -74,6 +74,23 @@ export class JLIcon {
     return icon.element(props);
   }
 
+  /**
+   * Get any existing JLIcon instance by name, construct a React element
+   * from it, then return said element.
+   *
+   * @param name - name of the JLIcon instance to fetch
+   *
+   * @param fallback - if left undefined, use automatic fallback to
+   * icons-as-css-background behavior: elem will be constructed using
+   * a blank icon with `elem.className = classes(name, props.className)`,
+   * where elem is the return value. Otherwise, fallback can be used to
+   * define the default JLIcon instance, used to construct the return
+   * elem whenever lookup fails
+   *
+   * @param props - passed directly to JLIcon.react
+   *
+   * @returns a React element
+   */
   static getReact({
     name,
     fallback,
@@ -89,9 +106,9 @@ export class JLIcon {
   }
 
   /**
-   * Toggle icon debug from off-to-on, or vice-versa
+   * Toggle icon debug from off-to-on, or vice-versa.
    *
-   * @param debug - Optional boolean to force debug on or off
+   * @param debug - optional boolean to force debug on or off
    */
   static toggleDebug(debug?: boolean) {
     JLIcon._debug = debug ?? !JLIcon._debug;
@@ -133,14 +150,19 @@ export class JLIcon {
       return null;
     }
 
+    let ret: HTMLElement;
     if (container) {
       // take ownership by removing any existing children
       while (container.firstChild) {
         container.firstChild.remove();
       }
+
+      ret = svgElement;
     } else {
       // create a container if needed
       container = document.createElement(tag);
+
+      ret = container;
     }
 
     this._initContainer({ container, className, propsStyle, title });
@@ -148,7 +170,7 @@ export class JLIcon {
     // add the svg node to the container
     container.appendChild(svgElement);
 
-    return svgElement;
+    return ret;
   }
 
   render(host: HTMLElement, props: JLIcon.IProps = {}): void {