Chrome Release Bot (LUCI) 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
..
BUILD.gn 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
COMMON_METADATA 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
DEPS 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
DIR_METADATA 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
OWNERS 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
README.md 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
account_circle.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
ads.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
ads_click.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
aggregate_vector_icons.py 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
arrow_back.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
back_arrow.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
blocked_badge.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
bluetooth.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
bluetooth_connected.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
bluetooth_scanning.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
business.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
call.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
call_end.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
caret_down.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
caret_up.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
cc_macros.h 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
celebration.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
certificate.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
check_circle.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
close.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
close_rounded.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
cloud_download.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
code.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
content_copy.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
content_paste.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
content_paste_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
cookie.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
description.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
devices.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
devices_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
dogfood.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
edit.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
email.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
error.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
error_outline.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
ethernet.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
extension.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
feed.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
file_download.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
file_download_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
folder.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
folder_managed.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
folder_managed_touch.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
folder_open.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
folder_touch.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
font_download.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
forward_arrow.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
google_color.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
gpp_maybe.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
groups.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
headset.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
help.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
help_outline.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
history.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
https_valid.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
https_valid_arrow.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
info_outline.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
insert_drive_file_outline.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
keyboard.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
launch.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
lightbulb_outline.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
live_caption_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
live_caption_on.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
location_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
location_on.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
lock.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
media_next_track.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
media_previous_track.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
media_router_active.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
media_router_error.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
media_router_idle.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
media_router_warning.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
media_seek_backward.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
media_seek_forward.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
mic.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
mic_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
midi.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
midi_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
not_secure_warning.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
notification_explore.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
notifications.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
notifications_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
open_in_new.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
page_info_content_paste.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
palette.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
pause.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
photo.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
play_arrow.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
protected_content.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
protocol_handler.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
qr_code.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
reload.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
replay.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
save_original_file.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
screen_share.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
search.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
select_window.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
sensors.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
serial_port.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
settings.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
settings_outline.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
sms.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
submenu_arrow.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
sync.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
text_decrease.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
text_increase.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
troubleshoot.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
usb.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
vector_icons.cc.template 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
vector_icons.gni 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
vector_icons.h.template 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
videocam.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
videocam_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
videogame_asset.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
videogame_asset_outline.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
volume_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
volume_up.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
vr_headset.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
vr_headset_off.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
warning.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
warning_outline.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten
wifi_add.icon 4762b62e7d Publish DEPS for 106.0.5249.13 1 vuosi sitten

README.md

Vectorized icons in native Chrome UI

Background

Chrome can draw vectorized images using Skia. Vector images have the advantages of looking better at different scale factors or sizes, can be easily colorized at runtime, and reduce the chrome binary size.

Chrome uses .icon files to describe vector icons. This is a bespoke file format which is actually a C++ array definition. At build time, the .icon files are composed into a .cc file which is compiled into the binary.

Vector icons can be found in various vector_icons subdirectories throughout the code base. Use components/vector_icons/ for generic icons shared among many directories and components, or more specific directories such as ui/views/vector_icons or ash/resources/vector_icons for less widely used icons.

Some of the .icon files have multiple variants of the same icon (contained within the same file). See Why do we need multiples sizes of vector icons.

Converting an SVG to .icon format

This tool generates .icon file output from SVGs. (If you want to contribute improvements, here’s the project.)

It handles only a small subset of SVG (paths, circles, etc.) and it’s finicky about what it expects as the format, but with a minor amount of manual intervention beforehand, it mostly spits out usable .icon output. It will often work better if you run the SVG through SVGO first, which is a separate project (an SVG minifier). Jake Archibald’s SVGOMG is a web interface to SVGO. If any manual adjustments need to be made to the output, the SVG Path spec is a helpful reference; compare with the relevant Chromium drawing commands.

Some SVGs are already pretty minimal, like the ones at the Material Design Icon repository so they don’t require much if any adjustment, but some SVG editing tools like Sketch leave a lot of random cruft so SVGOMG helps a lot. Take the output and insert into a .icon file.

Troubleshooting icon generation

  • My colors are inverted! There is probably a surplus square path encompassing your icon. For example, <path d="M0 0h16v16H0z"/>. Delete this and try again.

Using .icon files

Adding new icons

Once you have created an .icon file, place it in an appropriate vector_icon subdirectory and add the filename to the corresponding BUILD.gn. A constant is automatically generated so that the icon can be referenced at runtime. The icon file foo_bar.icon is mapped to the constant name of kFooBarIcon (‘k’ + camel-cased filename + ‘Icon’), which you can use to reference that icon in code. The icon’s name should match its identifier on the MD icons site if that’s where it came from. For example, ic_accessibility would become accessibility.icon.

Make sure not to add trademarked resources such as Google product logos to the Chromium repo.

Icons with multiple definitions

To add multiple icon definitions to a single .icon file, place the definitions generated by Skiafy in descending order of size. Each definition after the first must start with a CANVAS_DIMENSIONS directive.

Your icon may not need multiple definitions. Don’t add different sizes that are exact copies of one another with a scaling multiplier applied.

In code

A sample call site to create an icon for the foo_bar.icon file looks something like:

gfx::CreateVectorIcon(kFooBarIcon, 32, color_utils::DeriveDefaultIconColor(text_color));

If the size argument is unspecified, the size will be taken from the smallest icon size in the .icon file.

CreateVectorIcon() will use the icon definition that best matches the final pixel size required, which is the product of DIP and the device scale factor (DSF). For example, for a DIP size of 32 and DSF of 100%, a rep with CANVAS_DIMENSIONS, 32, would be used, whereas a configuration with DSF of 150% would prefer a rep with CANVAS_DIMENSIONS, 48.

FAQ

Where can I use vector icons?

Chrome’s native UI on desktop platforms. Currently the vector icons are in extensive use on Views platforms, where Skia is the normal drawing tool. Mac uses them sometimes, but optimizing performance is still a TODO so many places stick with raster assets. The files in chrome/app/theme/default_*_percent/legacy are ones that have been switched to vector icons for Views but not yet for OS X. If you need to add raster assets (PNG) for mobile or OS X, please make sure to limit their inclusion to those platforms.

How can I preview vector icons?

Use this extension to preview icons in codesearch.

You can also build and run the views_examples_exe (or views_examples_with_content_exe) target and select «Vector Icons» from the dropdown menu. This loads a simple interface which allows you view a provided vector icon file at a specified size and color. Contributions to improve this interface are welcome (bug).

Can my vector icon have more than one color?

Yes. You can hard-code colors for specific path elements by adding a PATH_COLOR_ARGB command to the appropriate place within the .icon file. Any path elements which are not given a hard-coded color in this manner will use the color provided to CreateVectorIcon() at runtime.

When introducing a new icon, should I use a PNG or a vector icon?

Use a vector icon, unless the icon is extremely complex (e.g., a product logo). Also see above, «Where can I use vector icons?»

I see mentions of ‘.1x.icon’ files on the bug tracker. What are those?

A deprecated format where different icon representations were spread across different files.

Why do we need multiple sizes of vector icons?

Even though these icons are vector, sometimes they may still be blurry or fuzzy drawn at different sizes. This is due to the icon not being aligned to the pixel grid and is more obvious at small sizes. In these cases, it is better to design an additional icon specifically for that size. For larger icons, the line stroke width used is often thicker (e.g. 2px for 100%, 3px for 200%), or they may include more detail omitted from smaller ones.