Design Objectives
This information is based on the Oracle Alta Icon Web Design Guide, which should be reviewed before using this document. The Alta Mobile Icon Style uses different types of icons and different styles of icons. These two key concepts are described in the overview.
Icon Type & Style
| ICON TYPE | ICON STYLE | ||||
| RESTRICTED | Achromatic | MONO COLOR | FULL PALETTE | STATUS | |
| Text Box |  |
||||
| Segmented Button | |
||||
| Input Slider | |
|
|||
| Buttons | |
||||
| List View Contextual Action | |
||||
| PopUp Contextual Action | |
|
|
||
| Link | |
||||
| Header / Footer | |
||||
| Navigation Bar | |
||||
| List View Springboard | |
|
|
||
| List View Menu | |
|
|||
| Message (Status & Badge Icons) | |
|
|||
Scaling
When you design icons for your app, it's important to keep in mind that your app may be installed on a variety of devices that offer a range of screen sizes and densities. There are several different general 'buckets' that these icons can fit. Apple iOS has two buckets, while Android has 5 buckets. Android doesn't use LDPI anymore. ADF Mobile uses a CSS pixel at Non-Retina or MDPI as a baseline.
| Android | DPI | iOS | CSS px | % |
| MDPI | ~160 | Non-Retina | 1.00 | 100% |
| XHDPI | ~320 | Retina | 2.00 | 200% |
| XXHDPI | ~480 | 3.00 | 300% | |
| XXXHDPI | ~640 | 4.00 | 400% |
Icon Sizes
The following are recommended sizes of icons based on user interface component, across the different screen density buckets. For platform information review the iOS Human Interface Guidelines for Icon and Image Design and the Android Design Guidelines for Iconography. Also 'Using Hi DPI Images' blog post explains how large images may scale down in ADF Mobile.
| ICON TYPE | ICON SIZE | ||||
| REQUIRED | MDPI Inner / Outer |
XHDPI Inner / Outer |
XXHDPI Inner / Outer |
XXXHDPI Inner / Outer |
|
| Text Box | |
16x16 / 20x20 | 32x32 / 40x40 | 48x48 / 60x60 | 64x64 / 80x80 |
| Segmented Button | |
20x20 / 24x24 | 40x40 / 48x48 | 60x60 / 72x72 | 80x80 / 96x96 |
| Input Slider | |
18x18 / 24x24 | 36x36 / 48x48 | 54x54 / 72x72 | 72x72 / 96x96 |
| Borderless | |
18x18 / 26x26 | 36x36 / 52x52 | 54x54 / 78x78 | 72x72 / 104x104 |
| Small Chip | |
16x16 / 20x20 | 32x32 / 40x40 | 48x48 / 60x60 | 64x64 / 80x80 |
| Large Chip | |
24x24 / 28x28 | 48x48 / 56x56 | 72x72 / 84x84 | 96x96 / 112x112 |
| Small Bordered | |
12x12 / 16x16 | 24x24 / 32x32 | 36x36 / 48x48 | 48x48 / 64x64 |
| Medium Bordered | |
16x16 / 20x20 | 32x32 / 40x40 | 48x48 / 60x60 | 64x64 / 80x80 |
| Large Bordered | |
20x20 / 24x24 | 40x40 / 48x48 | 60x60 / 72x72 | 80x80 / 96x96 |
| Sheet Button | 24x24 / 28x28 | 48x48 / 56x56 | 72x72 / 84x84 | 96x96 / 112x112 | |
| List View Contextual Action | |
24x24 / 32x32 | 48x48 / 64x64 | 72x72 / 96x96 | 96x96 / 128x128 |
| PopUp Contextual Action | 32x32 / 64x64 | 64x64 / 128x128 | 96x96 / 192x192 | 128x128 / 256x256 | |
| Link | 14x14 / 18x18 | 28x28 / 36x36 | 42x42 / 54x54 | 56x56 / 72x72 | |
| Header / Footer | |
18x18 / 26x26 | 36x36 / 52x52 | 54x54 / 78x78 | 72x72 / 104x104 |
| List View Menu | |
24x24 / 32x32 | 48x48 / 64x64 | 72x72 / 96x96 | 96x96 /128x128 |
| Navigation Bar | |
24x24 / 32x32 | 48x48 / 64x64 | 72x72 / 96x96 | 96x96 /128x128 |
| List View Springboard | |
24x24 / 32x32 | 48x48 / 64x64 | 72x72 / 96x96 | 96x96 / 128x128 |
| Message (Status & Badge Icons) | 30x30 / 38x38 | 60x60 / 76x76 | 120x120 / 152x152 | 240x240 / 304x304 | |
Squares
- Outer Square - The full icon within a safe zone. (100%)
- Inner Square - The square centered inside the outer square. The area where the visual element sits. (~75%)
RETINA ICON SAMPLE
Please Note: Icon footprint will include the outer square in the asset. This helps increase the Tap-able target on some components. It is strongly encouraged to test the icons you create across different devices, since scaling may not work correctly on every device.