Welcome to the Onshape forum! Ask questions and join in the discussions about everything Onshape.

First time visiting? Here are some places to start:
  1. Looking for a certain topic? Check out the categories filter or use Search (upper right).
  2. Need support? Ask a question to our Community Support category.
  3. Please submit support tickets for bugs but you can request improvements in the Product Feedback category.
  4. Be respectful, on topic and if you see a problem, Flag it.

If you would like to contact our Community Manager personally, feel free to send a private message or an email.

download high-res Onshape official icons

Evan_ReeseEvan_Reese Member Posts: 1,356 PRO
I'm looking for a way to download full-res versions of the icons used in the UI, everything from the folder icon to the extrude feature icon. I'm building out a best practices document for our internal use and would like to incorporate the same icons that everyone is used to seeing in Onshape.

Another reason I'd like to see them larger is to imitate the style for my own custom feature icons.

I know for many of them I can zoom in and screenshot, but I'm wondering if there's an easier/better way to get them that's less labor-intensive.
Evan Reese / Principal and Industrial Designer with Ovyl
Website: ovyl.io

Best Answers

  • MBartlett21MBartlett21 Member, OS Professional, Developers Posts: 2,000 EDU
    Answer ✓
    @Evan_Reese
    All the Part Studio icons, etc are stored in a file called icons.min.svg. You can then view the source of the page and just copy the region (including <symbol> tags) pertaining to the specific icon that you want. You can then replace the <symbol> tags with <svg> tags, keeping the viewbox attribute on the opening tag and adding a width="200px" to the first tag to enlarge the icon.
    mb - draughtsman - also FS author: View FeatureScripts

Answers

  • john_mcclaryjohn_mcclary Member, Developers Posts: 3,634 PRO
    On second thought, that may or may not be theft?

    Hope I don't get in trouble for pointing out browser tools (⊙_⊙;)
  • john_mcclaryjohn_mcclary Member, Developers Posts: 3,634 PRO
    edited December 2019
     o:) 
  • Evan_ReeseEvan_Reese Member Posts: 1,356 PRO
    edited December 2019
    haha, thanks. I'll give it a try.
    Evan Reese / Principal and Industrial Designer with Ovyl
    Website: ovyl.io
  • Evan_ReeseEvan_Reese Member Posts: 1,356 PRO
    @john_mcclary
    That's helpful. I see a number of icons, but am I being dense for not seeing ones like the Part Studio Icon or the feature icons? Are they maybe linked in from somewhere else or something? Let's just say that everything I know about JS I've learned by fumbling through featurescript, so the answer might be very basic.
    Evan Reese / Principal and Industrial Designer with Ovyl
    Website: ovyl.io
  • MBartlett21MBartlett21 Member, OS Professional, Developers Posts: 2,000 EDU
    Answer ✓
    @Evan_Reese
    All the Part Studio icons, etc are stored in a file called icons.min.svg. You can then view the source of the page and just copy the region (including <symbol> tags) pertaining to the specific icon that you want. You can then replace the <symbol> tags with <svg> tags, keeping the viewbox attribute on the opening tag and adding a width="200px" to the first tag to enlarge the icon.
    mb - draughtsman - also FS author: View FeatureScripts
  • lemon1324lemon1324 Member, Developers Posts: 216 EDU
    It looks like that particular link at least has been locked down, I get "access denied" now. I was hoping to use the actual icon as a base when creating a new icon for one of my features.
    Arul Suresh
    PhD, Mechanical Engineering, Stanford University
  • S1monS1mon Member Posts: 709 PRO
    I haven't tested this, but perhaps this browser extension would help: https://www.smashingmagazine.com/2022/05/magical-svg-techniques/#download-svgs-from-any-site
  • MichaelPascoeMichaelPascoe Member Posts: 803 PRO
    @S1mon, thanks. SVG Gobbler works beautifully! Now we can have more professional in house help documentation and tutorials.


  • MichaelPascoeMichaelPascoe Member Posts: 803 PRO
    edited May 31
    I promise to use all 1368 of these svg's responsibly  o:) ...   >:)


  • NeilCookeNeilCooke Moderator, Onshape Employees Posts: 4,228
    I tried that, but the downloaded files were empty though?
    Director, Technical Services, EMEAI
  • Evan_ReeseEvan_Reese Member Posts: 1,356 PRO
    It worked for me
    Evan Reese / Principal and Industrial Designer with Ovyl
    Website: ovyl.io
  • NeilCookeNeilCooke Moderator, Onshape Employees Posts: 4,228
    Tried Windows and Mac - 0KB files - oh well, I'll just have to get them from the developers :wink:
    Director, Technical Services, EMEAI
  • MichaelPascoeMichaelPascoe Member Posts: 803 PRO
    edited June 1
    @NeilCooke where's the thrill in that?  ;)
    Only worked one at a time for me, probably due to my slow connection atm. 
  • lemon1324lemon1324 Member, Developers Posts: 216 EDU
    Firefox extension worked for me even though Chrome didn't, maybe that's it?
    Arul Suresh
    PhD, Mechanical Engineering, Stanford University
  • Evan_ReeseEvan_Reese Member Posts: 1,356 PRO
    Worked for me on Chrome 🤷‍♂️ I only tried one though.
    Evan Reese / Principal and Industrial Designer with Ovyl
    Website: ovyl.io
  • MBartlett21MBartlett21 Member, OS Professional, Developers Posts: 2,000 EDU
    @lemon1324

    The url seems to now be /images/icons.v1.4.178.min.svg

    To get the url, the first element on an Onshape page under <body os-application-fullframe> is <div ng-include="'/images/icons.v1.4.178.min.svg'" class="os-svgmin-container"></div>
    mb - draughtsman - also FS author: View FeatureScripts
Sign In or Register to comment.