Closed Bug 1485185 Opened 2 years ago Closed 2 years ago

Replace current RDM icon with updated icon


(DevTools :: Responsive Design Mode, enhancement, P3)

63 Branch


(firefox63 fixed)

Firefox 63
Tracking Status
firefox63 --- fixed


(Reporter: victoria, Assigned: yash.johar1992, Mentored)



(2 files, 3 obsolete files)

Attached image rdmicon.svg (obsolete) —
Replace iPod-looking icon with the awesomely recognizable phone/tablet icon designed by Yash Johar.

- Build and run the Firefox code
- Download attached svg file - clean up the svg code and add a license as explained in
- Add svg file and submit a patch for review
Assignee: nobody → yash.johar1992
Component: General → Responsive Design Mode
Priority: -- → P3
Attached image rdm.svg (obsolete) —
Hi Yash! We looked at your commit and it looks good, except I just realized I should have re-saved this in Adobe Illustrator which makes it half as many bytes. Looks like this: 

<svg id="Layer_1" data-name="Layer 1" xmlns="" viewBox="0 0 16 16"><title>Artboard 1</title><path d="M4,5H5.09V1h9.82V15H4A1.23,1.23,0,0,0,5.2,16h9.6A1.27,1.27,0,0,0,16,14.67V1.33A1.27,1.27,0,0,0,14.8,0H5.2A1.27,1.27,0,0,0,4,1.33Z"/><path d="M2,4H7A1,1,0,0,1,8,5V15a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V5A1,1,0,0,1,2,4ZM2,6v8H7V6Z"/></svg>

I attached the new SVG file I made to this bug. If you could amend your commit with this new file, that would be great. Sorry for the extra step!
Attachment #9002949 - Attachment is obsolete: true
Flags: needinfo?(yash.johar1992)
I've amended the comment with the new attachment. Thanks Victoria!
Flags: needinfo?(yash.johar1992)
Hey Yash, we can almost go ahead with removing the id and data-name attributes, and <title> since they are not necessary.
Hi Gabriel, thanks for pointing that out. Unnecessary tags and attributes have been removed.
Sorry for the delay on the review, I know Victoria is still playing around with making the icon look more like our photon styled buttons by playing around with the line widths.
Yes, sorry to send this back into design-mode! We can continue the discussion here:
Attached image icon with negative spacing (obsolete) —
Attached image rdm3.svg
Thanks Yash, attached is the compressed version from Illustrator.

Also, inspired by this work, Gabe and I started discussing with the rest of the DevTools team about this requirement of adding of the MPL license to SVGs - it seemed a shame to add so many bytes when the SVGs are so carefully cleaned up otherwise. I think we can go ahead and not include the license for this, as many other icons in Firefox haven't added it anyway.
Attachment #9003276 - Attachment is obsolete: true
Attachment #9004902 - Attachment is obsolete: true
A good tool for optimizing SVGs is
(For 16px icons, a precision of 2 decimals is enough.)

Icons should have `fill="context-fill #0b0b0b" on the root element. The final SVG code might look like this:

<svg xmlns="" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
  <path d="…"/>
Thanks Florens. The SVG code now looks like:
<svg xmlns="" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
  <path d="…"/>
Pushed by
Replace current RDM icon with phone/tablet icon; r=gl
Comment on attachment 9003271 [details]
Bug 1485185: Replace current RDM icon with phone/tablet icon; r=gl

Gabriel [:gl] (ΦωΦ) has approved the revision.
Attachment #9003271 - Flags: review+
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
You need to log in before you can comment on or make changes to this bug.