How to change account/login icon in Dawn 14.0.0

Topic summary

Goal: Replace the Dawn 14.0.0 account/login icon with a custom SVG.

What was tried:

  • Advised to edit icon-account.liquid and insert an optimized SVG matching Dawn’s original dimensions (document ~18×19 px, icon ~17×18 px).
  • The provided Inkscape SVG (very large canvas, extra metadata) didn’t work as expected.

Key guidance provided:

  • For web use, export as Plain SVG. Set final document size and viewBox. Convert strokes to paths, Union shapes, reduce nodes, remove stroke paint, and rely on fills (fill-rule: evenodd). Copy just the path d attribute where possible.
  • Optimized “thin” and “thick” SVG variants were shared (code central but not visible here).

Latest update and fix:

  • Site uses custom icons and a custom wrapper, causing mismatched sizing and a large icon on mobile. A new 20×20 SVG was provided plus CSS:
    • Theme settings > Custom CSS:
      • .header__icon > account-icon { padding-bottom: 1px; }
      • .header__icon:hover .icon { transform: none; }
  • An example image was attached (image central).

Status: A concrete SVG + CSS solution was proposed; awaiting confirmation from the requester. Unresolved until tested and confirmed.

Summarized with AI on December 26. AI used: gpt-5.

Did not work. This is the svg that I want to put in the original log (there is something written after the code):

<sodipodi:namedview
id=“namedview1”
pagecolor=“#ffffff
bordercolor=“#000000
borderopacity=“0.25”
inkscape:showpageshadow=“2”
inkscape:pageopacity=“0.0”
inkscape:pagecheckerboard=“0”
inkscape:deskcolor=“#d1d1d1
inkscape:document-units=“mm”
showguides=“true”
inkscape:export-bgcolor=“#ffffff00
inkscape:zoom=“0.056568542”
inkscape:cx=“2430.6796”
inkscape:cy=“3349.9184”
inkscape:window-width=“1920”
inkscape:window-height=“1009”
inkscape:window-x=“1358”
inkscape:window-y=“-8”
inkscape:window-maximized=“1”
inkscape:current-layer=“layer1” />

There was a guy who said that when something goes wrong, you should remove these first two lines of code: width=“2000mm”
height=“2000mm”
But it still doesn’t work.
If I leave these lines the icon becomes huge. If I remove it, it doesn’t appear. But when I try to adjust their size it becomes very messy on the website.
I found it strange because when I looked at the cart and search icons it didn’t give me exactly this problem.