Artwork
Here is the artwork that has been created for FreeCAD. Feel free to reuse in other applications. If you would like to contribute with icons, please read the guidelines at the bottom of this page first.
Application Icons
The FreeCAD Icon
File Menu and Toolbar Icons
Edit Menu and Toolbar Icons
View Menu Icons
File:View-zoom-all.svg File:View-zoom-selection.svg
File:Workbench Points.png File:Workbench Reverse Engineering.png File:Workbench Test.png
Tools Menu Icons
Macro Menu and Toolbar Icons
File:Macro-record.svg File:Macro-stop.svg File:Macro-execute.svg
Windows Menu Icons
Help Menu Icons
Tree Icons, Overall GUI
Arch WB: Architecture Menu and Arch Tools Toolbar Icons
Arch WB: Tree Icons
Draft WB: Draft Menu Icons
File:Snap Lock.svg File:Snap Midpoint.svg File:Snap Perpendicular.svg File:Snap Grid.svg File:Snap Intersection.svg File:Snap Parallel.svg File:Snap Endpoint.svg File:Snap Angle.svg File:Snap Center.svg File:Snap Extension.svg File:Snap Near.svg File:Snap Ortho.svg File:Snap Dimensions.svg File:Snap WorkingPlane.svg
Draft WB: Draft Menu Icons
Draft WB: Draft Modification Tools Menu Icons
Draft WB: Command Bar Icons
Draft WB: Tree Icons
Drawing WB: Toolbar and Menu Icons
File:Drawing--draft-view.svg File:Drawing-landscape.svg File:Drawing-landscape-new.svg File:Drawing-landscape-A0.svg File:Drawing-landscape-A1.svg File:Drawing-landscape-A2.svg File:Drawing-landscape-A3.svg File:Drawing-landscape-A4.svg File:Drawing-portrait-A0.svg File:Drawing-portrait-A1.svg File:Drawing-portrait-A2.svg File:Drawing-portrait-A3.svg File:Drawing-portrait-A4.svg File:Drawing-view.svg File:Drawing-openbrowser.svg File:Drawing-annotation.svg File:Drawing-clip.svg File:Drawing-symbol.svg File:DrawingWorkbench.svg File:Page.svg File:Pages.svg
FEM WB: FEM Menu and Toolbar Icons
File:Fem FemMesh.svg File:Fem Material.svg File:Fem NewAnalysis.svg File:Fem QuickAnalysis.svg File:Fem FemMesh createnodebypoly.svg File:Fem ConstraintPressure.svg File:Fem ConstraintBearing.svg File:Fem ConstraintGear.svg File:Fem ConstraintPulley.svg File:Fem Result.svg File:Fem ResultStress.svg File:Fem AddFemMesh.svg File:Fem AddMaterial.svg File:Fem AddPart.svg File:Fem Purge results.svg File:Fem Frequency.svg File:Fem BeamSection.svg File:Fem ShellThickness.svg File:Fem-box.svg File:Fem-cfd-analysis.svg File:Fem-data-along-line.svg File:Fem-femmesh-clear.svg File:Fem-inp-editor.svg File:Fem-isosurface.svg File:Fem-linearized-stress.svg File:Fem-plane.svg File:Fem-preferences.svg File:Fem-clip.svg File:Fem-clip-scalar.svg File:Fem-constraint-initial-temperature.svg File:Fem-temperature.svg File:Fem-cut.svg File:Fem-cylinder.svg File:Fem-sphere.svg File:Fem-wrap.svg
png
File:Fem-add-fem-mesh.png File:Fem-add-material.png File:Fem-add-part.png File:Fem-box.png File:Fem-cfd-analysis.png File:Fem-data-along-line.png File:Fem-femmesh-clear.png File:Fem-femmesh-print-info.png File:Fem-frequency-analysis.png File:Fem-inp-editor.png File:Fem-isosurface.png File:Fem-linearized-stress.png File:Fem-plane.png File:Fem-static-analysis.png File:Fem-thermomechanical-analysis.png File:Fem-preferences.png
Image WB: Toolbar Icons
Inspection WB: Inspection Menu Icons
Meshes WB: Meshes Menu and Toolbar Icons
File:Mesh Import Mesh.svg File:Mesh Export Mesh.svg File:Mesh Harmonize Normals.svg File:Mesh Flip Normals.svg File:Mesh boundary.svg File:Mesh Remove Components.svg File:Mesh Regular Solid.svg File:Mesh cut.svg File:Mesh Curvature Plot.svg
Meshes WB: Tree Icons
OpenSCAD WB: OpenSCAD Menu and Toolbar Icons
File:Part CreatePrimitives.svg File:Preferences-openSCAD.svg
Part WB: Part Menu Icons
File:Part CreatePrimitives.svg
Part WB: Part > Part Tools Menu Area and Toolbar Icons
File:Part CreatePrimitives.svg
File:Part Polygon Parametric.svg
Part WB: Measure Menu and Toolbar Icons
File:Part Measure Toggle 3d.svg
Part WB: Tree Icons
Part Design WB: Part Design Menu or Toolbar Icons
Part Design Next WB:
File:PartDesign Additive Wedge.svg File:PartDesign Subtractive Cylinder.svg File:PartDesign Subtractive Pipe.svg File:PartDesign Subtractive Prism.svg File:PartDesign Subtractive Torus.svg File:PartDesign Subtractive Wedge.svg File:PartDesignWorkbech.svg
Plot WB: Plot Menu or Toolbar Icons
File:Save.svg File:Axes.svg File:Grid.svg File:Legend.svg File:Labels.svg File:Positions.svg
Points WB: Points Toolbar and Menu Icons
Raytracing WB: Raytracing Menu Icons
File:Raytrace Camera.svg File:Raytrace Part.svg
Raytracing WB: Raytracing Toolbar Icons Icons
Reverse Engineering WB: REEN Menu and Toolbar Icons
Robot WB: Robot Menu and Toolbar Icons
Ship WB: Ship Design Menu and Toolbar Icons
Ship WB: Ship Weights Menu and Toolbar Icons
Sketcher WB: Sketcher Menu and Sketch Toolbar Icons
File:Sketcher Polyline.svg File:Sketcher Rectangle.svg
File:Constraint ToggleConstraint Driven.svg File:Constraint ToggleConstraint Driving.svg
Sketcher Constraints Icons Not Used
Sketcher WB: Combo View > Elements Icons
TechDraw WB:
File:Techdraw-new-default.svg File:Annotation.svg File:Dimension.svg File:Dimension Angle.svg File:Dimension Diameter.svg File:Dimension Horizontal.svg File:Dimension Length.svg File:Dimension Radius.svg File:Dimension Vertical.svg File:LinkDimension.svg File:Page.svg File:Pages.svg File:PageTemplate.svg File:ProjBottom.svg File:ProjFront.svg File:ProjFrontBottomLeft.svg File:ProjFrontBottomRight.svg File:ProjFrontTopLeft.svg File:ProjFrontTopRight.svg File:ProjGroup.svg File:ProjLeft.svg File:ProjRear.svg File:ProjRight.svg File:ProjTop.svg File:Section.svg File:Symbol.svg
TechDraw WB: actions
File:Drawing-draft-view.svg File:SaveSVG.svg File:Techdraw-annotation.svg File:Techdraw-clip.svg File:Techdraw-clipminus.svg File:Techdraw-clipplus.svg File:Techdraw-draft-view.svg File:Techdraw-hatch.svg File:Techdraw-landscape.svg File:Techdraw-landscape-A0.svg File:Techdraw-landscape-A1.svg File:Techdraw-landscape-A2.svg File:Techdraw-landscape-A3.svg File:Techdraw-landscape-A4.svg File:Techdraw-landscape-new.svg File:Techdraw-new-default.svg File:Techdraw-new-pick.svg File:Techdraw-openbrowser.svg File:Techdraw-portrait-A4.svg File:Techdraw-projgroup.svg File:Techdraw-symbol.svg File:Techdraw-toggleframe.svg File:Techdraw-view.svg File:Techdraw-viewsection.svg
Tree Icons
File:Tree Mesh.svg File:Tree Selectable.svg File:Tree Unselectable.svg
Other/General Icons
Emot icons
File:FreeCAD05 Tango Face-angel.svg File:FreeCAD05 Tango Face-blush.svg File:FreeCAD05 Tango Face-crying.svg File:FreeCAD05 Tango Face-devil-grin.svg File:FreeCAD05 Tango Face-glasses.svg File:FreeCAD05 Tango Face-grin.svg File:FreeCAD05 Tango Face-grin-braces.svg File:FreeCAD05 Tango Face-kiss.svg File:FreeCAD05 Tango Face-plain.svg File:FreeCAD05 Tango Face-sad.svg File:FreeCAD05 Tango Face-smile.svg File:FreeCAD05 Tango Face-smile-big.svg File:FreeCAD05 Tango Face-surprise.svg File:FreeCAD05 Tango Face-wink.svg
File:FreeCAD05 Tango Anaglyph.svg
File:FreeCAD05 Tango Applications-games.svg
File:FreeCAD05 Tango Applications-ristretto.svg
File:FreeCAD05 Tango Dialog-error.svg
File:FreeCAD05 Tango Dialog-warning.svg
File:FreeCAD05 Tango Measure.svg
File:FreeCAD05 Tango Process-stop.svg
File:FreeCAD05 Tango Text-x-python.svg
File:FreeCAD05 Tango Camera-photo.svg
File:FreeCAD05 Tango Preferences-system.svg
File:FreeCAD05 Tango Camera-video.svg
File:FreeCAD05 Tango Applications-graphics.svg
File:FC Christmas.svg
Splash screens
FreeCAD Icons by their location in source code
From \src\Gui\Icons
File:Debug marker.svg File:Macro-execute.svg File:Macro-record.svg File:Macro-stop.svg File:View-zoom-all.svg File:View-zoom-border.svg File:View-zoom-selection.svg
The Background has been re-sized to a display width of 480 pixels:
From \src\Gui\Icons\ClassBrowser
From \src\Mod\Arch\Resources\icons
From \src\Mod\Arch\Resources\ui
From src\Mod\Assembly\Gui\Resources\icons\actions
From \src\Mod\Draft\Resources\Icons
File:Snap Angle.svg File:Snap Center.svg File:Snap Dimensions.svg File:Snap Endpoint.svg File:Snap Extension.svg File:Snap Grid.svg File:Snap Intersection.svg File:Snap Lock.svg File:Snap Midpoint.svg File:Snap Near.svg File:Snap Ortho.svg File:Snap Parallel.svg File:Snap Perpendicular.svg File:Snap WorkingPlane.svg
From \src\Mod\Draft\Resources\Patterns
From \src\Mod\Drawing\Gui\Resources\Icons
From \src\Mod\Drawing\Gui\Resources\Icons\Actions
File:Drawing-annotation.svg File:Drawing-clip.svg File:Drawing-landscape.svg File:Drawing-landscape-A0.svg File:Drawing-landscape-A1.svg File:Drawing-landscape-A2.svg File:Drawing-landscape-A3.svg File:Drawing-landscape-A4.svg File:Drawing-landscape-new.svg File:Drawing-openbrowser.svg File:Drawing-portrait-A4.svg File:Drawing-symbol.svg File:Drawing-view.svg
From \src\Mod\Drawing\Templates
File:A3 Landscape.svg File:A3 Landscape ISO7200.svg File:A4 Landscape.svg File:A4 Landscape ISO7200.svg File:A4 Portrait ISO7200.svg
The following image is "A4_Simple.svg":
From \src\Mod\Fem\Gui\Resources\Icons\Actions
File:Fem AddFemMesh.svg File:Fem AddMaterial.svg File:Fem AddPart.svg File:Fem ConstraintBearing.svg File:Fem ConstraintGear.svg File:Fem ConstraintPulley.svg File:Fem FemMesh.svg File:Fem FemMesh createnodebypoly.svg File:Fem Material.svg File:Fem NewAnalysis.svg File:Fem Result.svg File:Fem ResultStress.svg
From \src\Mod\Image\Gui\Resources\Icons
From \src\Mod\Mesh\Gui\Resources\Icons
File:Mesh boundary.svg File:Mesh cut.svg File:Tree Mesh.svg
From \src\Mod\Inspect\Gui\Resources\Icons
From \src\Mod\Material\Gui\Resources\Icons
From \src\Mod\Mesh\Gui\Resources\Icons
File:Mesh boundary.svg File:Mesh Curvature Plot.svg File:Mesh cut.svg File:Mesh Export Mesh.svg File:Mesh Flip Normals.svg File:Mesh Harmonize Normals.svg File:Mesh Import Mesh.svg File:Mesh pipette.svg File:Mesh Regular Solid.svg File:Mesh Remove Components.svg File:Tree Mesh.svg
From \src\Mod\Mesh\Gui\Resources\Icons\RegularSolids
From \src\Mod\MeshPart\Gui\Resources\Icons\Actions
From \src\Mod\OpenSCAD\Gui\Resources\Icons\
From \src\Mod\Part\Gui\Resources\icons\
File:Part CreatePrimitives.svg File:Part Measure Toggle 3d.svg File:Part Polygon Parametric.svg File:Part Workbench.svg
From \src\Mod\PartDesign\Gui\Resources\icons\
From \src\Mod\PartDesign\WizardShaft\
From \src\Mod\Path\Gui\Resources\icons
File:Path-Area-View.svg File:Path-Area-Workplane.svg File:Path-Array.svg File:Path-Axis.svg File:Path-BaseGeometry.svg File:Path-Comment.svg File:Path-Compound.svg File:Path-Contour.svg File:Path-Copy.svg File:Path-Custom.svg File:Path-Datums.svg File:Path-Depths.svg File:Path-Dressup.svg File:Path-Drilling.svg File:Path-FacePocket.svg File:Path-FaceProfile.svg File:Path-Heights.svg File:Path-Holding.svg File:Path-Hop.svg File:Path-Inspect.svg File:Path-Job.svg File:Path-Kurve.svg File:Path-LengthOffset.svg File:Path-LoadTool.svg File:Path-Machine.svg File:Path-MachineLathe.svg File:Path-MachineMill.svg File:Path-Machine-test1.svg File:Path-OperationA.svg File:Path-OperationB.svg File:Path-Plane.svg File:Path-Pocket.svg File:Path-Post.svg File:Path-Profile.svg File:Path-Profile-Edges.svg File:Path-Sanity.svg File:Path-SelectLoop.svg File:Path-Shape.svg File:Path-Simple copy.svg File:Path-Speed.svg File:Path-Stock.svg File:Path-Stop.svg File:Path-Tags.svg File:Path-ToolChange.svg File:Path-Toolpath.svg File:Path-ToolTable.svg
From \src\Mod\Plot\resources\icons
File:Axes.svg File:Grid.svg File:Icon.svg File:Labels.svg File:Legend.svg File:Positions.svg File:Save.svg
From \src\Mod\Points\Gui\Resources\icons
From \src\Mod\Raytracing\Gui\Resources\icons
File:Raytrace Camera.svg File:Raytrace Part.svg
From \src\Mod\ReverseEngineering\Gui\Resources\icons\actions
From \src\Mod\Robot\Gui\Resources\icons
From \src\Mod\Ship\Resources\icons
File:Ship Wieght.svg File:ShipWorkbench.svg
From \src\Mod\Sketcher\Gui\Resources\icons
File:Sketcher ConstrainLock Driven.svg File:Sketcher CreateEllipse.svg File:Sketcher CreateEllipse Constr.svg File:Sketcher Elliptical Arc.svg File:Sketcher Elliptical Arc Constr.svg File:Sketcher Parabolic Arc Constr.svg File:Sketcher ToggleConstraint Driving.svg File:SketcherWorkbech.svg
From \src\Mod\Sketcher\Gui\Resources\icons\small
Files in this folder cannot be uploaded due to the file extension.
From \src\Mod\Spreadsheet\Resources\icons
File:SpreadsheetPropertyController.svg
From \src\Mod\Start\StartPage
File:ArchDesign.png File:Freecad-doc.png File:PartDesign.png
The following images have been re-sized to a display width of 600 pixels:
From \src\Mod\Web\Gui\Resources\icons\actions
Guidelines
Introduction
A FreeCAD icon is composed of 6 elements which can be remembered easily using the awkward acronym "SALCHO": Stroke, Alignment, Lighting, Color, Highlighting, Outline
Here's a concrete, yet arbitrary example:
A | The highlight color is used for this entire surface to indicate light falling from above |
B | The obligatory dark outline surrounds the icon shape to provide form contrast |
C | Just inside the outline, the highlight stroke (using the highlight color) provides contrast on dark backgrounds |
D | This face is primarily the base color, but a light gradient from highlight (top left) to base (bottom right) gives the impression of light falling from above left |
E | The highlight here is the base color (one tone down) to give the impression of this being the face furthest from the light |
F | This face is like D but goes from Base (top left) to Dark (bottom right), to indicate that this is the face furthest from the light |
The following sections explain these elements in a more structured way.
Colors
[Obligatory] FreeCAD uses a palette adapted from the Tango palette. Each main color comes in 4 tones: Highlight, Base, Dark and Outline.
Use the Yellow tones for tools that create objects. | ||||
Use the Blue tones for tools that modify objects | ||||
Use the Teal tones for view-related tools | ||||
Use the Red tones for Constraint related tools |
Why limit myself to these colors? |
Restricting the colors to a defined palette helps avoid heterogeneous iconography and improves readability when there are many icons. |
How? | Installing the palette is as easy as copying it into your Inkscape palette folder. |
Grid & Stroke Width
[Obligatory] FreeCAD Icons are 64px*64px nominal size (Though I like to leave a 2px margin all around to prevent funky antialiasing things from happening on the image edge). When creating or editing an icon, make sure your document size is 64 x 64 with the units being px. This gives you 60px * 60px of useable space.
It's also strongly recommended to apply at least one grid to the document that has a grid line every pixel and a major grid line every 2 pixels. Feel free to add other grids to help out, but you should have at least that one. You're strokes would then be aligned along the minor grid intersections. (See image)
Strokes should be no thinner than 2px, with rounded caps and corners in most cases. Strokes can be thicker, but aim for a multiple of two to minimise scaling fuzziness.
Why use this grid and stroke size? |
For historical reasons, FreeCAD uses a 64px icon that then gets scaled down. Not ideal, but it adds character. As a result, keeping things aligned to a power of two grid with thicknesses that are powers of two helps to avoid or at least mitigate anti-aliasing issues upon rescaling. |
How? | Go to "File > Document Properties" and confirm the width, height and units of your page are correct. Then go to the "Grids" tab and click "New", setting the units to "px", "Spacing X" and "Spacing Y" to 1 and "Major grid line every" to 2 |
Outline
[Obligatory] Basing yourself on the main color of the icon, ensure that there is a dark outline (of 2px as mentioned earlier). This works in union with the highlight to ensure good form contrast on multiple background tones.
Why is the outline needed? |
The outline is the skeleton on which everything else hangs by adding form contrast. Using the Outline color or the Dark color depends on the situation, but without this line, the range of backgrounds on which the icon is visible gets drastically limited |
How? | Simply add an external stroke of 2px around every part of the icon that will be adjacent to the background color. In the case of a donut shape for example, you would also do the interior hole. Snap your path's nodes to the grid whenever possible, aiming for the minor grid intersections. |
Highlight
[Strongly Advised] Using the Highlight color, add an internal stroke (again, 2px) to help make that outline pop. On dark backgrounds, it's this highlight that will be providing the form to the icon.
Why use the highlight? |
The highlight works in unison with the outline to improve form contrast - especially on dark backgrounds. It is never a bad idea, but if you don't have the space (on a thin line for example) you can opt out of it provided you have ensured enough contrast between the main color and the outline |
How? | Just like the outline, simply trace a stroke of 2px around the internal side of the outline, snapping nodes to the grid when possible, aiming for the minor grid intersections. |
Lighting
[Optional] As per Tango guidelines, if you're adding a gradient lighting effect, try to make it look like the light is coming from the top left. This is done by adding the highlight color up top left and the Base or Dark color bottom right (notice that I haven't played around trying to use a non-palette color)
Why use lighting? |
Lighting is just another way to tie icons together and ensure that there are varying levels of 'value' to improve their readability. Provided the outline and highlight are present though, it can be considered optional |
How? | Set the fill to be a linear or a radial gradient. (Available in the stroke and fill settings). Remember that using "F2" to set direct select, you can move the nodes of the gradient around to make sure they are at the right angle. |
Closing Remarks
That's it - that's all there is to making sure that there's a unified look to all the icons. Remember: SALCHO Stroke, Alignment, Lighting, Color, Highlight, Outline
Here's a collection of tips to be able to check your work:
Checking Size
Inkscape has a super handy tool to check your icon at various sizes. Go to "View > Icon Preview..." and it'll show you previews of your icon resized to 16,24,32 and 64px!
Checking Your Outline
1. Put your icon on a big rectangle that is the same color as the darkest color in your icon.
2. Still looks OK? Great! Go to step 3. If not, see the frowny face
3. Do the same but this time using the lightest color.
4. Still looks OK? Great! Outlines and highlights have been used appropriately!
My icon is barely visible! |
You have poor form contrast. Double check the outline and highlight, one of these is probably missing or improperly applied. |
Checking Your Contrast
1. Get your icon and export it to either .png or .jpg, whichever you prefer
2. Open an image program and change it to grayscale. In GIMP for example you would go to "Image > Mode > Grayscale" (This is excellent for testing for color blind users)
3. Can you still clearly make out any internal details? Great! You have good contrast!
I can't make out all the wonderful detail! |
The colors you've chosen have poor value contrast. Try using colors that are further apart in your 4 tone palette. i.e. A Highlight green beside a highlight yellow will be difficult to see, knock one of those colors down to Base or Dark. |