Jump to content

Design/Whiteboards/Flat icon set

From The Document Foundation Wiki

This page was marked as inactive and is retained for historical reference.
Either the page is no longer relevant or consensus on its purpose has become unclear. To revive discussion, seek broader input via a forum such as one of our mailing lists.

Summary

Design a flat icon set for the desktop version of LibreOffice.

Status

Analysis Call for Proposals Shaping Tentative Design Blueprint Implemented

Scope

In Scope Out of Scope
  • Basing off an icon set with a license not compatible with the MPL license

Goals

  • Monochrome
  • Flat
  • Scalable
  • Easy to tweak
  • Intelligible
  • Consistent
  • Crisp

Guidelines

  1. Use a 16x16 primary canvas.
  2. Snap to grids for clean shapes.
  3. Stick to the metaphor of the full-color set whenever possible.
  4. Reuse icons available in GNOME symbolic-icons or parts of them whenever possible.
  5. Use as simple of a shape as possible, switching from perspective to head on when needed.
  6. Omit non-defining details and focus on one shape, do not use tiny labels or numbers.
  7. If possible use a 2px outline.
  8. Never use fonts in the outcome, draw the characters with snapping to grids in mind when needed.
  9. Use #8e8d8c as the color to your icons, if a secondary shade is needed or showing inactivity is desired use the %35 opacity of the same color.
  10. Add a blank 16x16 square centered on top of your finished icon and group it with it.
  11. Test the outcome in 16x16 and scaled up dimensions.
  12. Follow the standard icons naming.
  13. Set the object id property for every icon to the standard icon name. Set the label property to the same value, or set it to "icon". Next use the modified cnvsvg.py script to extract icons from the SVG file: "python cnvsvg.py stencils.svg flat galaxy" where "flat" is the output directory and "galaxy" is the path to extracted copy of any other icon set that is installed with LibreOffice (like share/config/images.zip). See also Design/User Experience/Tools.

Discussion

Tentative Design

All design work happens in our GitHub repository.

External links