Icons

Overview

Icons are small SVG shapes, ranging from basic UI shapes to brand logos. NewsKit contains a default set but any of these can be overriden by providing a React component in the icons section of your theme.

Usage

Icons can be used to enhance other elements and content, as well as used inside links or buttons when space is limited.

Available Icons

Name	Preview
IconFilledCircle
IconFilledGitHub
IconFilledFacebook
IconFilledTwitter
IconFilledWhatsApp
IconFilledPlaceholder

Props

Icons must have a size specified, and some also support an optional colour override.

titlestring

This is an optional title property to override the existing svg title, set in each icon.

overridesobject

If provided, overrides the respective presets for the component and provided elements.

stylePresetstring

If provided, this overrides the style preset applied to the svg.

sizestring

If provided, this overrides the size of the icon.

Playground

Props

Component

SizeiconSize020iconSize030iconSize040iconSize050

import React from 'react';
import { Facebook } from 'newskit';

export default () => (
  <Facebook overrides={{ size: 'iconSize040' }} />
);

Create NewsKit icons

With the help of the customToNewsKitIcon util function, each SVG icon can be easily turned into a Newskit icon that works well with theme tokens and getFromTheme util functions. The only requirement is to wrap the SVG markup within an Svg component and pass props to it.

The following example shows how the SVG component should be used:


  <Svg {...props} viewBox="0 0 429 422">
    <g fill="none" fill-rule="evenodd" transform="translate(-77.000000, -1738.000000) translate(77.000000, 1738.500000)">
      <circle cx="250.5" cy="242.5" r="178" style="mix-blend-mode:multiply"/>
      <circle cx="195" cy="195" r="195" style="mix-blend-mode:multiply"/>
    </g>
  </Svg>

Use customToNewsKitIcon utility function to make the svg icon compatible with NewsKit:


export const IconFilledCircles = customToNewsKitIcon(
  'IconFilledCircles',
  props => (
 <Svg {...props} viewBox="0 0 429 422">
  <g fill="none" fill-rule="evenodd" transform="translate(-77.000000, -1738.000000) translate(77.000000, 1738.500000)">
    <circle cx="250.5" cy="242.5" r="178" style="mix-blend-mode:multiply"/>
    <circle cx="195" cy="195" r="195" style="mix-blend-mode:multiply"/>
  </g>
 </Svg>
  ),
);

Rationale

Accessibility

Where icon colour can be overidden, the icon must have a 3:1 minimum contrast ratio with its background.