Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.



React component that renders a hexagon using SVG. Supports background images, links, SVG content, click handlers... Stylable with CSS.


See the demos page for some demos.


react-hexagon can be installed using npm:

npm install --save react-hexagon

Size of component is about ~1.5kB after gzip.

Basic usage

import React from 'react'
import Hexagon from 'react-hexagon'

    style={{stroke: '#42873f'}}


All properties are optional.

  • className - Class name of SVG element.
  • href - Link target, if any. Hexagon will only be wrapped in an anchor if this is set.
  • target - Target of link. Same role as in regular HTML.
  • flatTop - Switches hexagon style to have a flat top (basically, rotate the hexagon by 90°). Default: false
  • backgroundImage - URL to a background image. Recommend that the image has the same aspect ratio as a hexagon. See background sizing notes below.
  • style - Styles for the hexagon element.
  • children - Children nodes to put inside SVG element.
  • hexProps - Arbitrary properties to apply to the hexagon element (the actual polygon, not the outer SVG). Useful to apply event listeners, class names or similar.
  • diagonal - Size of diagonal. Affects sizing of elements within the SVG, and can usually be left as-is. Instead, scale the SVG element using CSS width/height. Default: 500

Background sizing

Sizing and aligning the background image can be slightly tricky. We recommend that you try to stick with images that has the same aspect ratio as a hexagon, or square images that can be slightly scaled.

By default, if you give the hexagon element a background image with a different aspect ratio, it'll try to center the image horizontally/vertically while maintaining the original image aspect ratio. For square images, this means you'll end up with a small border. If you instead want to upscale the image to fill the hexagon, use the backgroundScale property (see below).

Background sizing properties are resolved in the following order (first one defined wins):

  • backgroundScale - Used to upscale the image, usually in order to fill the entire hexagon if the aspect ratio does not match. 0.5 mean scale to 50% of the hexagon, 1.5 means scale to 150%. For square images, 1.05 is usually a good number to use.
  • backgroundWidth / backgroundHeight - Used to manually adjust the size of the background image.
  • backgroundSize - Can be used if the image has a square ratio.

Note: backgroundWidth, backgroundHeight and backgroundSize are relative to the diagonal, which defaults to 500.


Licensed under the MIT License, see LICENSE


React component that renders a hexagon using SVG. Supports background images, links, SVG content, click handlers and more.




No packages published
You can’t perform that action at this time.