PopClip

Appearance

Icons ​

Icons may be specified in icon fields in several different ways:

  • As a filename: <filename>.png or <filename>.svg. See Image files.

  • As text: <text specifier>. See Text icons.

  • As an Iconify icon: iconify:<icon set prefix>:<icon name>. See Iconify icons.

  • As an SF Symbol: symbol:<symbol name>. See SF Symbols icons.

  • As SVG source code: svg:<svg source>.

Image files ​

If you specify the name of a PNG or SVG image file in the extension's package, it will be used.

Images should feature a monochrome shape on a transparent background. Variable opacity can be used for shading.

PNG icons should be at least 256 pixels high.

Text icons ​

Using a particular format, you can instruct PopClip to generate a text-based icon. Text icons can have a text: prefix, but it is optional.

Text icon examples ​

Specifier stringIcon generated
text:A or just A
circle 1
circle filled 本
square xyz
square filled !
square filled monospaced ()
search E
search filled monospaced £

Text icon format ​

The specifier format is <shape> <modifiers> <text>.

  • <shape> is optional and can be one of:
KeywordEffect
squareEncloses text in a round-cornered square.
circleEncloses text in a circle.
searchEncloses text in a magnifying glass shape.
  • <modifiers> are optional and can be any combination of:
KeywordEffect
filledSpecifies a solid filled shape instead of an outline shape.
monospacedSpecifies that the text be drawn with a monospaced font.
  • <text> can be up to three characters.

💡 Tip: Monospaced font

Punctuation symbols often look better in icons when drawn with the monospaced modifier.

Iconify icons ​

Iconify provides over 150,000 icons from a variety of open-source icon sets. Browse the catalog at https://icon-sets.iconify.design/.

The format is iconify:<icon set prefix>:<icon name>.

Iconify icon examples ​

Specifier stringIcon generated
iconify:ion:fishTODO
iconify:solar:flag-boldTODO
iconify:noto:cowboy-hat-faceTODO

SF Symbols icons ​

Apple SF Symbols are available on macOS 11.0 and above. The icon catalog can be viewed by installing Apple's SF Symbols app on your Mac.

The format is symbol:<symbol name>.

SF Symbols icon examples ​

Specifier stringIcon generated
symbol:flame
symbol:hand.raised
symbol:signpost.right

Color handling ​

By default, PopClip renders icons with a uniform fill color, ignoring any color information in the image. However, you can set the preserve color flag (see Icon options) to tell PopClip to keep the original color palette.

Special case: Color Iconify icons

PopClip will automatically render color icons from Iconify in color.

Icon options ​

These optional fields can be placed in the config alongside the icon field to modify how PopClip draws it.

KeyTypeDescription
preserve colorBooleanIf true, the supplied icon will be displayed with its original color instead of being filled in white/black. Default is false.
preserve aspectBooleanIf true, the supplied icon will be displayed with its original aspect ratio instead of being scaled to fit a square. Default is false.
flip horizontalBooleanIf true, the supplied icon will be drawn horizontally flipped. Default is false.
flip verticalBooleanIf true, the supplied icon will be drawn vertically flipped. Default is false.

Icon Preview tool ​

The Icon Preview extension.

As a handy tool, the following snippet defines an extension that will display the icon for any text string you select. (To see how to install this, see Snippets.)

javascript
// #popclip
// name: Icon Preview
// entitlements: [dynamic]
// language: javascript
// module: true
exports.actions = (selection) => {
  return [{
    icon: selection.text,
  }];
};
// #popclip
// name: Icon Preview
// entitlements: [dynamic]
// language: javascript
// module: true
exports.actions = (selection) => {
  return [{
    icon: selection.text,
  }];
};