--- a/devtools/client/debugger/images/moz.build
+++ b/devtools/client/debugger/images/moz.build
@@ -40,12 +40,13 @@ DevToolsModules(
     'reload.svg',
     'resume.svg',
     'rewind.svg',
     'search.svg',
     'stepIn.svg',
     'stepOut.svg',
     'stepOver.svg',
     'tab.svg',
+    'webconsole-logpoint.svg',
     'whole-word-match.svg',
     'window.svg',
     'worker.svg',
 )

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/images/webconsole-logpoint.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" fill-opacity=".2" stroke="context-fill" stroke-linejoin="round" d="M.5 9V3c0-.83.67-1.5 1.5-1.5h5.05a.5.5 0 0 1 .38.17L11.33 6l-3.9 4.33a.5.5 0 0 1-.38.17H2A1.5 1.5 0 0 1 .5 9z"/>
+</svg>

--- a/devtools/client/locales/en-US/webconsole.properties
+++ b/devtools/client/locales/en-US/webconsole.properties
@@ -126,16 +126,20 @@ table.value=Values
 # LOCALIZATION NOTE (level.error, level.warn, level.info, level.log, level.debug):
 # tooltip for icons next to console output
 level.error=Error
 level.warn=Warning
 level.info=Info
 level.log=Log
 level.debug=Debug
 
+# LOCALIZATION NOTE (logpoint.title)
+# Tooltip shown for logpoints sent from the debugger
+logpoint.title=Logpoints from the debugger
+
 # LOCALIZATION NOTE (webconsole.find.key)
 # Key shortcut used to focus the search box on upper right of the console
 webconsole.find.key=CmdOrCtrl+F
 
 # LOCALIZATION NOTE (webconsole.close.key)
 # Key shortcut used to close the Browser console (doesn't work in regular web console)
 webconsole.close.key=CmdOrCtrl+W
 

--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -228,16 +228,21 @@ a {
 }
 
 .message:hover > .icon.rewindable {
   background-image: url(chrome://devtools/skin/images/next-circle.svg);
   cursor: pointer;
   transform: rotate(180deg);
 }
 
+.message > .icon.logpoint {
+  background-image: url(resource://devtools/client/debugger/images/webconsole-logpoint.svg);
+  color: var(--theme-graphs-purple);
+}
+
 /*
  * we flip the next.svg icon by default because when we're
  * not paused, we would jump back. We remove the transform here
  * because we want to jump forward.
  */
 .message.paused ~ .message:hover .icon.rewindable {
   transform: none;
 }

--- a/devtools/client/webconsole/components/Message.js
+++ b/devtools/client/webconsole/components/Message.js
@@ -139,27 +139,29 @@ class Message extends Component {
 
   renderIcon() {
     const {
       level,
       messageId,
       executionPoint,
       serviceContainer,
       inWarningGroup,
+      type,
     } = this.props;
 
     if (inWarningGroup) {
       return undefined;
     }
 
     return MessageIcon({
       level,
       onRewindClick: (serviceContainer.canRewind() && executionPoint)
         ? () => serviceContainer.jumpToExecutionPoint(executionPoint, messageId)
         : null,
+      type,
     });
   }
 
   render() {
     const {
       open,
       collapsible,
       collapseTitle,

--- a/devtools/client/webconsole/components/MessageIcon.js
+++ b/devtools/client/webconsole/components/MessageIcon.js
@@ -20,40 +20,52 @@ const l10nLevels = {
 
 // Store common icons so they can be used without recreating the element
 // during render.
 const CONSTANT_ICONS = Object.entries(l10nLevels).reduce((acc, [key, l10nLabel]) => {
   acc[key] = getIconElement(l10nLabel);
   return acc;
 }, {});
 
-function getIconElement(level, onRewindClick) {
+function getIconElement(level, onRewindClick, type) {
   let title = l10n.getStr(l10nLevels[level] || level);
   const classnames = ["icon"];
 
   if (onRewindClick) {
     title = l10n.getFormatStr("webconsole.jumpButton.tooltip", [title]);
     classnames.push("rewindable");
   }
 
-  return dom.span({
+  if (type && type === "logPoint") {
+    title = l10n.getStr("logpoint.title");
+    classnames.push("logpoint");
+  }
+
+  { return dom.span({
     className: classnames.join(" "),
     onClick: onRewindClick,
     title,
     "aria-live": "off",
-  });
+  }); }
 }
 
 MessageIcon.displayName = "MessageIcon";
 MessageIcon.propTypes = {
   level: PropTypes.string.isRequired,
   onRewindClick: PropTypes.function,
+  type: PropTypes.string,
 };
 
 function MessageIcon(props) {
-  const { level, onRewindClick } = props;
+  const { level, onRewindClick, type } = props;
+
+  if (onRewindClick) {
+    return getIconElement(level, onRewindClick, type);
+  }
 
-  return onRewindClick
-    ? getIconElement(level, onRewindClick)
-    : CONSTANT_ICONS[level] || getIconElement(level);
+  if (type) {
+    return getIconElement(level, null, type);
+  }
+
+  return CONSTANT_ICONS[level] || getIconElement(level);
 }
 
 module.exports = MessageIcon;

--- a/devtools/client/webconsole/test/components/message-icon.test.js
+++ b/devtools/client/webconsole/test/components/message-icon.test.js
@@ -13,9 +13,17 @@ const MessageIcon = createFactory(requir
 
 describe("MessageIcon component:", () => {
   it("renders icon based on level", () => {
     const rendered = render(MessageIcon({ level: MESSAGE_LEVEL.ERROR }));
     expect(rendered.hasClass("icon")).toBe(true);
     expect(rendered.attr("title")).toBe("Error");
     expect(rendered.attr("aria-live")).toBe("off");
   });
+
+  it("renders logpoint items", () => {
+    const rendered = render(MessageIcon({
+      level: MESSAGE_LEVEL.LOG,
+      type: "logPoint",
+    }));
+    expect(rendered.hasClass("logpoint")).toBe(true);
+  });
 });