How to customize the main icons of your app

App style

App style sets the overall design of your app from one place: colors, fonts, buttons, form fields, and more.

In the My App menu, click App style.

Settings come in two parts: the essentials, then additional options. Everything here applies to every section of your app, and replaces the design you set section by section.

Colors

Start with the colors.

A color theme is a set of colors that work well together. Pick one in the library… and the preview shows your app with it.

Magic palette suggests a new theme for you… with every click.

Then adjust each color in detail: the header, the main colors, the backgrounds, the menu, and the buttons.

Click a color, enter a code or pick one, then click Choose.

The header takes the new color.

Click Apply to use these colors across your app, or Cancel to keep your current ones. Here, we keep them.

Fonts

Next, the fonts.

A font theme combines three fonts that work well together. You can pick one in this list.

The slider sets the size of all texts at once, and keeps the hierarchy between them.

Every text level grows together.

Your app uses eight text levels, from the main title to normal text. To change the font of one level, open it… and pick a font. All Google Fonts are available, and the plus button adds a font of your own, if its license allows it.

The main title takes the new font.

For each level, you can also set the weight, the line height, and the letter spacing.

Here again, click Apply to use these fonts, or Cancel to keep yours.

Buttons and form fields

Buttons are next.

Your app uses three levels of buttons, chosen by GoodBarber for each action: level one is filled, level two is outlined, and level three is a simple text link. Their colors come from your color theme.

Choose their shape: square, rounded, or round… and every button of your app takes it.

Form fields work the same way: choose their shape, their size, and where the title goes, above the field or inside it.

Thumbnails and cells

Thumbnails and cells set the shape of the images and cards in your lists: square, rounded, or round.

Here, the corners become square.

On the desktop web app, you can also add an effect when the mouse moves over a picture.

Spacing

Spacing sets the margins around your content, in pixels.

With wider margins, the content gets more room around it.

Animations and haptics

On the native iOS and Android apps, you can also choose how a page opens from a list, add a light vibration when users tap, and reveal elements as they scroll.

Icons

In Icons, you choose the default icons of your app. For example, click the bookmark icon… and choose another one in the library.

The new icon appears on every article.

Background and separators

Last, the background of your app: a color or an image, and the color of the separators.

The background changes on every page.

Publish

To make your changes visible to your users, publish your app's update from the Publish menu.