Replace current RDM icon with updated icon

RESOLVED FIXED in Firefox 63


7 months ago
6 months ago


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


63 Branch
Firefox 63

Firefox Tracking Flags

(firefox63 fixed)



(2 attachments, 3 obsolete attachments)



7 months ago
Posted 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


7 months ago
Assignee: nobody → yash.johar1992
Component: General → Responsive Design Mode
Priority: -- → P3

Comment 2

7 months ago
Posted 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)

Comment 3

7 months ago
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.

Comment 5

7 months ago
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.

Comment 7

7 months ago
Yes, sorry to send this back into design-mode! We can continue the discussion here:

Comment 8

7 months ago
Posted image icon with negative spacing (obsolete) —

Comment 9

7 months ago
Posted 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="…"/>

Comment 11

7 months ago
Thanks Florens. The SVG code now looks like:
<svg xmlns="" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
  <path d="…"/>

Comment 12

7 months ago
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+

Comment 14

7 months ago
Last Resolved: 7 months ago
status-firefox63: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
You need to log in before you can comment on or make changes to this bug.