# Class: Icon

This documentation is for OpenLayers v10.9.0. The latest is v.

## ol/style/Icon~Icon

    import Icon from 'ol/style/Icon.js';

Set icon style for vector features.

#### new Icon(options)

style/Icon.js, line 83

  Name | Type | Description
  --- | --- | ---
  `anchor` | Array.<number> (defaults to [0.5, 0.5]) | Anchor. Default value is the icon center.
  `anchorOrigin` | IconOrigin (defaults to 'top-left') | Origin of the anchor: `bottom-left`, `bottom-right`, `top-left` or `top-right`.
  `anchorXUnits` | IconAnchorUnits (defaults to 'fraction') | Units in which the anchor x value is specified. A value of `'fraction'` indicates the x value is a fraction of the icon. A value of `'pixels'` indicates the x value in pixels.
  `anchorYUnits` | IconAnchorUnits (defaults to 'fraction') | Units in which the anchor y value is specified. A value of `'fraction'` indicates the y value is a fraction of the icon. A value of `'pixels'` indicates the y value in pixels.
  `color` | Color | string | undefined | Color to tint the icon. If not specified, the icon will be left as is.
  `crossOrigin` | null | string | undefined | The `crossOrigin` attribute for loaded images. Note that you must provide a `crossOrigin` value if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.
  `referrerPolicy` | ReferrerPolicy | undefined | The `referrerPolicy` property for loaded images.
  `img` | HTMLImageElement | HTMLCanvasElement | OffscreenCanvas | ImageBitmap | undefined | Image object for the icon.
  `displacement` | Array.<number> (defaults to [0, 0]) | Displacement of the icon in pixels. Positive values will shift the icon right and up.
  `opacity` | number (defaults to 1) | Opacity of the icon.
  `width` | number | undefined | The width of the icon in pixels. This can't be used together with `scale`.
  `height` | number | undefined | The height of the icon in pixels. This can't be used together with `scale`.
  `scale` | number | Size (defaults to 1) | Scale.
  `rotateWithView` | boolean (defaults to false) | Whether to rotate the icon with the view.
  `rotation` | number (defaults to 0) | Rotation in radians (positive rotation clockwise).
  `offset` | Array.<number> (defaults to [0, 0]) | Offset which, together with `size` and `offsetOrigin`, defines the sub-rectangle to use from the original (sprite) image.
  `offsetOrigin` | IconOrigin (defaults to 'top-left') | Origin of the offset: `bottom-left`, `bottom-right`, `top-left` or `top-right`.
  `size` | Size | undefined | Icon size in pixels. Used together with `offset` to define the sub-rectangle to use from the original (sprite) image.
  `src` | string | undefined | Image source URI.
  `declutterMode` | DeclutterMode | undefined | Declutter mode.

### Extends

- ImageStyle

### Methods

#### clone(){Icon}

style/Icon.js, line 304

  Clones the style. The underlying Image/HTMLCanvasElement is not cloned.

  ##### Returns:

  The cloned style.

#### getAnchor(){Array.<number>}

style/Icon.js, line 346

  Get the anchor point in pixels. The anchor determines the center point for the symbolizer.

  ##### Returns:

  Anchor.

#### getColor(){Color}

style/Icon.js, line 416

  Get the icon color.

  ##### Returns:

  Color.

#### getDeclutterMode(){DeclutterMode} inherited

style/Image.js, line 148

  Get the declutter mode of the shape

  ##### Returns:

  Shape's declutter mode

#### getDisplacement(){Array.<number>} inherited

style/Image.js, line 139

  Get the displacement of the shape

  ##### Returns:

  Shape's center displacement

#### getHeight(){number}

style/Icon.js, line 600

  Get the height of the icon (in pixels). Will return undefined when the icon image is not yet loaded.

  ##### Returns:

  Icon height (in pixels).

#### getImage(pixelRatio){HTMLImageElement | HTMLCanvasElement | OffscreenCanvas | ImageBitmap}

style/Icon.js, line 467

  Get the image icon.

  Name | Type | Description
  --- | --- | ---
  `pixelRatio` | number | Pixel ratio.

  ##### Returns:

  Image or Canvas element. If the Icon style was configured with `src` or with a not let loaded `img`, an `ImageBitmap` will be returned.

#### getOpacity(){number} inherited

style/Image.js, line 95

  Get the symbolizer opacity.

  ##### Returns:

  Opacity.

#### getOrigin(){Array.<number>}

style/Icon.js, line 512

  Get the origin of the symbolizer.

  ##### Returns:

  Origin.

#### getPixelRatio(pixelRatio){number}

style/Icon.js, line 478

  Get the pixel ratio.

  Name | Type | Description
  --- | --- | ---
  `pixelRatio` | number | Pixel ratio.

  ##### Returns:

  The pixel ratio of the image.

#### getRotateWithView(){boolean} inherited

style/Image.js, line 104

  Determine whether the symbolizer rotates with the map.

  ##### Returns:

  Rotate with map.

#### getRotation(){number} inherited

style/Image.js, line 113

  Get the symoblizer rotation.

  ##### Returns:

  Rotation.

#### getScale(){number | Size} inherited

style/Image.js, line 122

  Get the symbolizer scale.

  ##### Returns:

  Scale.

#### getSize(){Size}

style/Icon.js, line 575

  Get the size of the icon (in pixels).

  ##### Returns:

  Image size.

#### getSrc(){string | undefined}

style/Icon.js, line 547

  Get the image URL.

  ##### Returns:

  Image src.

#### getWidth(){number}

style/Icon.js, line 584

  Get the width of the icon (in pixels). Will return undefined when the icon image is not yet loaded.

  ##### Returns:

  Icon width (in pixels).

#### load()

style/Icon.js, line 639

  Load not yet loaded URI. When rendering a feature with an icon style, the vector renderer will automatically call this method. However, you might want to call this method yourself for preloading or other purposes.

#### setAnchor(anchor)

style/Icon.js, line 406

  Set the anchor point. The anchor determines the center point for the symbolizer.

  Name | Type | Description
  --- | --- | ---
  `anchor` | Array.<number> | Anchor.

#### setDisplacement(displacement) inherited

style/Image.js, line 229

  Set the displacement.

  Name | Type | Description
  --- | --- | ---
  `displacement` | Array.<number> | Displacement.

#### setOpacity(opacity) inherited

style/Image.js, line 239

  Set the opacity.

  Name | Type | Description
  --- | --- | ---
  `opacity` | number | Opacity.

#### setRotateWithView(rotateWithView) inherited

style/Image.js, line 249

  Set whether to rotate the style with the view.

  Name | Type | Description
  --- | --- | ---
  `rotateWithView` | boolean | Rotate with map.

#### setRotation(rotation) inherited

style/Image.js, line 259

  Set the rotation.

  Name | Type | Description
  --- | --- | ---
  `rotation` | number | Rotation.

#### setScale(scale)

style/Icon.js, line 618

  Set the scale.

  Name | Type | Description
  --- | --- | ---
  `scale` | number | Size | Scale.

#### setSrc(src)

style/Icon.js, line 556

  Set the image URI

  Name | Type | Description
  --- | --- | ---
  `src` | string | Image source URI