diff --git a/front_end/panels/console/ConsoleView.test.ts b/front_end/panels/console/ConsoleView.test.ts
index ac7e06a724..08a7eca91f 100644
--- a/front_end/panels/console/ConsoleView.test.ts
+++ b/front_end/panels/console/ConsoleView.test.ts
@@ -33,7 +33,7 @@ describeWithMockConnection('ConsoleView', () => {
 
   it('adds a title to every checkbox label in the settings view', async () => {
     const consoleSettingsCheckboxes =
-        consoleView.element.querySelector('devtools-toolbar')!.querySelectorAll('.toolbar-item.checkbox');
+        consoleView.element.querySelector('devtools-toolbar')!.querySelectorAll('dt-checkbox');
     if (!consoleSettingsCheckboxes) {
       assert.fail('No checkbox found in console settings');
       return;
diff --git a/front_end/ui/legacy/Toolbar.ts b/front_end/ui/legacy/Toolbar.ts
index 8c4710d3fa..6e470682a2 100644
--- a/front_end/ui/legacy/Toolbar.ts
+++ b/front_end/ui/legacy/Toolbar.ts
@@ -1215,11 +1215,9 @@ export class ToolbarCheckbox extends ToolbarItem<void> {
 
   constructor(
       text: Common.UIString.LocalizedString, tooltip?: Common.UIString.LocalizedString,
-      listener?: ((arg0: MouseEvent) => void), jslogContext?: string, small?: boolean) {
+      listener?: ((arg0: MouseEvent) => void), jslogContext?: string) {
     super(CheckboxLabel.create(text));
-    this.element.classList.add('checkbox');
     this.inputElement = (this.element as CheckboxLabel).checkboxElement;
-    this.inputElement.classList.toggle('small', small);
     if (tooltip) {
       // install on the checkbox
       Tooltip.install(this.inputElement, tooltip);
diff --git a/front_end/ui/legacy/inspectorCommon.css b/front_end/ui/legacy/inspectorCommon.css
index 6a0fc0acb7..6e8852caad 100644
--- a/front_end/ui/legacy/inspectorCommon.css
+++ b/front_end/ui/legacy/inspectorCommon.css
@@ -1009,7 +1009,7 @@ devtools-toolbar {
 
   /* Checkbox */
 
-  & > .checkbox {
+  & > dt-checkbox {
     padding: 0 5px 0 0;
   }