Icons can be a great way to bring essential content to the point. They are a great attention grabber and they help your website visitors to find and scan content.
Guidelines
- System1 uses fill icons encircled by a decorative dashed stroke
- Icons are filled with either S1 Green or S1 Black
- Stroke should be S1 Blue Green
Examples
Thicker stokes can be used to draw more attention to page headers and title pages.
The icon fill and stroke colors can be changed for another S1 color if more contrast with the background is needed.
Icon Crimes
Don't
Use line icons.
Don't
Use low-resolution, raster-based icons.
Don't
Use non-responsive icons.
Don't
Use non-brand colors.
Best Practices
- Use the SVG format when saving out icons. SVG is vector-based, and allows an image to be scalable without any loss in quality.
- Try to use stroke-based icons, and do not outline them. We can control stroke thickness via CSS if an SVG is embedded in the code.
- Please minify any SVG code to reduce file size.
- When saving icons, make sure they are 'responsive'. Otherwise they can get chopped off when settings different dimensions in CSS.