Icons and Illustrations

PNGs

  • PNGs are the preferred method for sourcing non SVG images. The exception is for images that are photographs, which should be optimized as JPGs and are covered in the photography section of this guide. If possible, create a PNG sprite if there are multiple images related to the same subject; similar to this sprite for radio buttons and checkboxes shown to the right.

Retina Images

Retina images are images that are twice the size of the default image size. Smartphones utilize this technology as well as newer apple desktops and laptops.

The retina images are created by the design team. They should be in the same directory as the non-retina images. The naming convention for retina images is simple: just add @2x to the end of the image name

example: nowsecure_logo.png (non-retina), [email protected] (retina)

We utilize retina.js. It should be included in the footer of the HTML page. It can be sourced from this server, at //ux.nowsecure.com/scripts/retina.js

Retina JS, which will automatically check if there is an image with the @2x extension, and will swap it out on retina enabled devices. In addition, there are best practices which should be followed for the most efficiency. One of the following HTML syntaxes should be applied to all hardcoded (not CSS) images.

Images sourced in CSS as background images can be swapped out via media queries. Please see the CSS and SCSS tabs below for details.

<!-- declare the retina image in the image tag -->
<img src="/images/my_image.png" data-at2x="[email protected]" />

<!-- do not declare the retina image, allow the script to search for it and replace it -->
<img src="/images/my_image.png" />

<!-- declare the that there is NOT a retina image in the image tag -->
<img src="/images/my_image.png" data-no-retina />
// declare the retina image in the image tag
img(src='/images/my_image.png', [email protected]')

// do not declare the retina image, allow the script to search for it and replace it
img(src='/images/my_image.png')

// declare the that there is NOT a retina image in the image tag
img(src='/images/my_image.png', data-no-retina='')
/* change color with fill, adjust size with width and height */

.icon-filled-gear {
    fill: #999cab;
    width:60px;
}
.icon-filled-gear:hover {
      fill: #333333;
}
/* change color with fill, adjust size with width and height */

.icon-filled-gear {
    fill: #999cab;
    width:60px;
    &:hover {
      fill: #333333;
}

Individual SVG Icons

Many of the visual designs utilize a specific set of icons unique to NowSecure's brand.

SVGs are preferred for brand specific icons. These graphics scale well and can be easily edited with CSS via the fill, height, and width properties, for example. Accessing these icons individually, while not preferred over a sprite sheet, would allow you to use the icon SVG code inline (permitting complete editing access) or save and use as an img (eliminating this inner-access editing power).

There are three designs for most icons, with each having slight variations that better accomodate different implimentation sizes/contexts. By default we source the 32px based design icons, unless otherwise directed.

Diagram showing variations in design of the same icon:

Diagram showing the three differnt designs for each icon

The default individual SVG icons are located in /images/icons/svg/default/. To source the SVG inline in HTML or Jade, open the SVG file inside a text editor and copy the code. Paste the code into your HTML or Jade document; this code is the source code for the graphic.

Alternatively, the individual simple icons are located in /images/icons/svg/simple/ and the complex icons are in /images/icons/svg/complex/; all icons have the same name within each seperate file.

All of these individual icons are also available in $blue and accessible in a similar way: /images/icons/svg/default_blue/. Risk icons, both filled and outlined, can be found is orange, yellow, green, and red in the "risk" folder, also with the individual "svg" folder: /images/icons/svg/risk/.

Below find the inline SVG code for the default add-user icon as an example:

Add user icon

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 41 46.3">
  <title>Add user icon</title>
  <g>
    <path fill="#999CAB" d="M17,35.6c5,0,9-4,9-9v-5.3c0-5-4-9-9-9s-9,4-9,9v5.3C8,31.6,12,35.6,17,35.6z M10,21.3c0-3.9,3.1-7,7-7
    	c3.9,0,7,3.1,7,7v5.3c0,3.9-3.1,7-7,7c-3.9,0-7-3.1-7-7V21.3z"/>
    <path fill="#999CAB" d="M31,38.4l-8.4-2.1c-0.2-0.1-0.5,0-0.7,0.1L17,38.9l-4.9-2.4c-0.2-0.1-0.5-0.1-0.7-0.1l-8.4,2
    	c-1.8,0.4-3,2-3,3.9v3.1c0,0.6,0.4,1,1,1h32c0.6,0,1-0.4,1-1v-3C34,40.5,32.8,38.9,31,38.4z M32,44.3H2v-2.1
    	c0-0.9,0.6-1.7,1.5-1.9l8-1.9l5,2.5c0.3,0.1,0.6,0.1,0.9,0l5-2.5l8.1,2c0.9,0.2,1.5,1,1.5,1.9V44.3z"/>
  </g>
  <g>
        <path fill="#999CAB" d="M29,0c-6.6,0-12,5.4-12,12c0,6.6,5.4,12,12,12c6.6,0,12-5.4,12-12C41,5.4,35.6,0,29,0z M33,12.8h-3.3V16
    	h-1.5v-3.2H25v-1.5h3.2V8h1.5v3.3H33V12.8z"/>
      </g>
    </svg>

svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox='0 0 41 46.3')
    title Add user icon
    g
      path(fill='#999CAB', d='M17,35.6c5,0,9-4,9-9v-5.3c0-5-4-9-9-9s-9,4-9,9v5.3C8,31.6,12,35.6,17,35.6z M10,21.3c0-3.9,3.1-7,7-7\
      c3.9,0,7,3.1,7,7v5.3c0,3.9-3.1,7-7,7c-3.9,0-7-3.1-7-7V21.3z')
      path(fill='#999CAB', d='M31,38.4l-8.4-2.1c-0.2-0.1-0.5,0-0.7,0.1L17,38.9l-4.9-2.4c-0.2-0.1-0.5-0.1-0.7-0.1l-8.4,2\
      c-1.8,0.4-3,2-3,3.9v3.1c0,0.6,0.4,1,1,1h32c0.6,0,1-0.4,1-1v-3C34,40.5,32.8,38.9,31,38.4z M32,44.3H2v-2.1\
      c0-0.9,0.6-1.7,1.5-1.9l8-1.9l5,2.5c0.3,0.1,0.6,0.1,0.9,0l5-2.5l8.1,2c0.9,0.2,1.5,1,1.5,1.9V44.3z')
    g
      path(fill='#999CAB', d='M29,0c-6.6,0-12,5.4-12,12c0,6.6,5.4,12,12,12c6.6,0,12-5.4,12-12C41,5.4,35.6,0,29,0z M33,12.8h-3.3V16\
      h-1.5v-3.2H25v-1.5h3.2V8h1.5v3.3H33V12.8z')

SVG Sprites

The preferred method of sourcing the icons is through an SVG sprite. This allows for a single http request per sprite as opposed to per image. There is one master sprite file containing all three versions of each icon which you can download here:

Remember to be mindful of the path you are generating when saving it so that you can successfully reference the icons in your project's HTML/Jade file; the file cannot be accessed remotely.

Through the use element we can call on any icon from the single sprite sheet, referencing its id within the xlink:href attribute. Here's a look at the different id names used to call different versions of the same icon type, again, in the individual project's HTML/Jade file:

            <!-- For demo purposes only, your href path will need to be specific to your project structure -->

<svg><use xlink:href="/images/sprites/master.svg#icon-settings-simple"></use></svg>

<svg><use xlink:href="/images/sprites/master.svg#icon-settings"></use></svg>

    <svg><use xlink:href="/images/sprites/master.svg#icon-settings-complex"></use></svg>
          

Take a look at a live demo here.

To call on the simple, or 16px based, designs add a -simple id extension to the specific icon as shown above. For the complex, or 64px based design, an id extension of -complex should be used. The available icons and default names are displayed/listed below.

Special Classes

There are some overriding sizes built into the stylesheet here that you can utilize via special classes within the SVG element when calling on graphics in your HTML.

Adding a class of icon will set their default styles to fill: currentColor; and a height and width of 32px.

A class name of icon-simple will override the icons to 16px and icon-complex will result in 64px icons.

To change the fill color add the class fill-[color name] to the SVG element itself. Examples of this are shown below.

Predetermined colors are:

blue lightblue darkblue gray lightgray green yellow orange red white