Home

Awesome

Matomo Icons

Build Status

This repository provides the source files for the icons in Matomo and the scripts used to convert them into a unified format.

Contributing

An icon is missing, or you have a better one? Create a new issue or, even better, open a pull request.

🖌️ Hint: We regularly generate a list of improvable icons. Some may have the wrong source file format, some may be too small. Feel free to pick one or two and provide a PR for it.

All source files are stored in categorized subfolders in /src. Please check whether your icon proposal complies with the following conventions. Then run the convert.sh script once to update the icon build in the /dist folder.

File Formats

Ideally all source files should be SVGs or high resolution (> 100px) PNGs.

As this is not always possible, JPGs, GIFs and (even multi resolution) ICOs are supported as well.

Naming

The grouping and naming of all icons results from the data sets that Matomo uses in its own tracking analysis.

Icon categoryData source for namingExample
brandDevice detection in Matomo Administration pageApple.png
browsershttps://github.com/matomo-org/device-detector/blob/master/Parser/Client/Browser.phpFF.png for Firefox Browser
deviceshttps://github.com/matomo-org/matomo/blob/5.x-dev/plugins/DevicesDetection/functions.php#L183-L198smartphone.png
flagshttps://github.com/lipis/flag-icons/tree/main/flags/4x3at.png for Austria
oshttps://github.com/matomo-org/device-detector/blob/master/Parser/OperatingSystem.php#L38WIN.png for Windows
pluginshttps://github.com/matomo-org/matomo/tree/5.x-dev/plugins/DevicePlugins/Columnsflash.png
searchEngineshttps://github.com/matomo-org/searchengine-and-social-list/blob/master/SearchEngines.ymlgoogle.com.png
SEOhttps://github.com/matomo-org/matomo/tree/5.x-dev/plugins/SEObing.com.png
socialshttps://github.com/matomo-org/searchengine-and-social-list/blob/master/Socials.ymlfacebook.com.png

Attribution

Every source file, except those in devices, flags, searchEngines and socials, needs to have a second file according to the scheme <icon name>.<file extension>.source that mentions where the image is from.